セレクトアイテムの移動

http://shanabrian.com/web/jquery/form01.phpから引用させていただいてます。
こちらで矢印をクリックではなく項目をダブルクリックで移動できるようにしたいです。
ｊQueryは初心者なのでご教授よろしくお願いいたします。


<body>
  <table class="sample">
    <tr>
      <td>
        <select name="s1" size="5" multiple="multiple">
          <option value="項目1" >項目1</option>
          <option value="項目2">項目2</option>
          <option value="項目3">項目3</option>
          <option value="項目4">項目4</option>
          <option value="項目5">項目5</option>
          <option value="項目6">項目6</option>
          <option value="項目7">項目7</option>
          <option value="項目8">項目8</option>
          <option value="項目9">項目9</option>
          <option value="項目10">項目10</option>
        </select>
      </td>
        <td>
          <input type="button" name="right" value="≫" /><br /><br />
          <input type="button" name="left" value="≪" />
        </td>
      <td>
        <select name="s2" size="5" multiple="multiple">
        </select>
      </td>
    </tr>
  </table>
 
</body>

m.ts10806

2018/10/25 12:54

現状のコードの問題点を記載してください。[jQuery]をタグに追加しておいてください。

m.ts10806

2018/10/25 12:54

[初心者アイコン]があるのでそちらをご活用ください

m.ts10806

2018/10/25 12:56

selectに対しては「ダブルクリック」にはならないように思いますが、実際にやりたいことを文章で伝わるように表現できているようには感じません。図示するなどもう少し要件を何も知らない人に伝わるようにしていただければと。

退会済みユーザー

2018/10/25 13:06 編集

初心者でわからないというのであれば、まず勉強してください。「私、料理の初心者なんです。」は全然いいと思いますが、「料理の作り方を教えてください」ではなく、「お母さん全部やって」では丸投げです…。丸投げして、得た回答から得られる情報も多いと思うので、悩ましいとこではありますが。。。

yambejp

2018/10/26 00:42

移動後は、移動した順番に表示されるのか、項目の順番に表示されるのか？どちらでしょうか？

行動規範の内容に同意します

回答2件

javascript
1$(function(){
2  $('[name=s1],[name=s2]').on('dblclick',function(e) {
3    $this=$(this);
4    $target=$(this).attr('name')=="s1"?$('[name=s2]'):$('[name=s1]');
5    $this.find("option").eq($this.prop("selectedIndex")).appendTo($target);
6  });
7});

投稿2018/10/26 00:52

yambejp

総合スコア114777

jQuery
1$(document).on('dblclick', 'option', function(event) {
2  const target = $(this);
3  target.closest('td').siblings().find('select').append(target);
4});

なお、IE/Edgeでは動かないため、おすすめしません。
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10350929/

jQuery
1$(document).on('dblclick', 'select', function(event) {
2  const target = $(this.selectedOptions[0]);
3  target.closest('td').siblings().find('select').append(target);
4});

投稿2018/10/25 13:30