如何使用jquery將所選項目從一個下拉組列表（optgroup）移動到另一個下拉組列表（optgroup）？

Question

我有兩個下拉分組列表（Optgroup）。我想使用右移，左移按鈕來交換這兩個html控件之間的項目。我可以從左側下拉菜單中選擇一個或多個項目，然後單擊右移按鈕。在這種情況下，我可以將選中的項目移動到右側下拉分組列表中。但項目不會像左側下拉分組列表那樣插入分組列表。

這是我的html控件。

<select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10"> 
<option value="">Please select</option> 
<optgroup label="Group A"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</optgroup> 
<optgroup label="Group B"> 
<option value="a">A</option> 
<option value="b">B</option> 
<option value="c">C</option> 
</optgroup> 
</select> 

<button type="button" title="Forward" id="btnRight">Move Right</button> 
<button type="button" title="Backward" id="btnLeft">Move Left</button> 

<select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10"> 
</select> 

我寫了下面的代碼將項目從左下拉分組列表移動到右下拉分組列表。

<script type="text/javascript"> 
    $(document).ready(function() { 
defaultListBind = function (e) { 
      var selectedOpts = $('#FieldstoBeMatchedOn'); 
      alert(selectedOpts); 
      $('#FieldstoBeMatchedOn').append($(selectedOpts).clone()); 
      $(selectedOpts).remove(); 
      //e.preventDefault(); 
     } 
     // defaultListBind(); 

     $('#btnRight').click(function (e) { 
      var selectedOpts = $('#AvailableFields option:selected'); 
      if (selectedOpts.length == 0) { 
       alert("Nothing to move."); 
       e.preventDefault(); 
      } 

      $('#FieldstoBeMatchedOn').append($(selectedOpts).clone()); 
      $(selectedOpts).remove(); 
      defaultSelect(); 
      e.preventDefault(); 
     }); 

     $('#btnLeft').click(function (e) { 
      var selectedOpts = $('#FieldstoBeMatchedOn option:selected'); 
      if (selectedOpts.length == 0) { 
       alert("Nothing to move."); 
       e.preventDefault(); 
      } 

      $('#AvailableFields').append($(selectedOpts).clone()); 
      $(selectedOpts).remove(); 
      defaultSelect(); 
      e.preventDefault(); 
     }); 
defaultSelect = function() { 
      $("#FieldstoBeMatchedOn option").each(function() { 
       $(this).prop("selected", true); 
      }); 
     } 
    }); 
</script> 

如何以分組或分類格式將項目從左下拉列表移動到右下拉列表中？

JSfiddle

我非常感謝你在先進的幫助。

Answer 1

如何this.You必須找到一種方法來刪除組時，有沒有在右側

$(document).ready(function() {  
 
$('#btnRight').click(function (e) { 
 
       var selectedOpts = $('#AvailableFields option:selected'); 
 
       if (selectedOpts.length == 0) { 
 
        alert("Nothing to move."); 
 
        e.preventDefault(); 
 
       } 
 

 
    if(selectedOpts.parent().attr('label') == "Group A"){ 
 
     $('#FieldstoBeMatchedOn').append($('<optgroup label="Group A">')).append($(selectedOpts).clone()); 
 
       $(selectedOpts).remove(); 
 
       defaultSelect(); 
 
       e.preventDefault(); 
 
    } 
 
    else{ 
 
     $('#FieldstoBeMatchedOn').append($('<optgroup label="Group B">')).append($(selectedOpts).clone()); 
 
       $(selectedOpts).remove(); 
 
       defaultSelect(); 
 
       e.preventDefault(); 
 
    } 
 
      }); 
 

 
      $('#btnLeft').click(function (e) { 
 
       var selectedOpts = $('#FieldstoBeMatchedOn option:selected'); 
 
       if (selectedOpts.length == 0) { 
 
        alert("Nothing to move."); 
 
        e.preventDefault(); 
 
       } 
 

 
       $('#AvailableFields').append($(selectedOpts).clone()); 
 
       $(selectedOpts).remove(); 
 
       defaultSelect(); 
 
       e.preventDefault(); 
 
      }); 
 
    defaultSelect = function() { 
 
       $("#FieldstoBeMatchedOn option").each(function() { 
 
        $(this).prop("selected", true); 
 
       }); 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10"> 
 
    <option value="">Please select</option> 
 
    <optgroup label="Group A"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </optgroup> 
 
    <optgroup label="Group B"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
    </optgroup> 
 
    </select> 
 

 
    <button type="button" title="Forward" id="btnRight">Move Right</button> 
 
    <button type="button" title="Backward" id="btnLeft">Move Left</button> 
 

 
    <select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10"> 
 
    </select>