HTML選擇框，我該如何移動/複製所選的選項從一個<select>到另一個

Question

我不能讓這個腳本工作：Fiddle

我想從多選通選擇的選項到另一個使用按鈕。 我認爲在嘗試選擇全部「option:selected」時，jQuery選擇器存在問題。

HTML：

<div> 
    <select id='canselect_code' name='canselect_code' multiple> 
     <option value='1'>toto</option> 
     <option value='2'>titi</option> 
    </select> 
    <input type='button' id='btnRight_code' value=' > ' /> 
    <br> 
    <input type='button' id='btnLeft_code' value=' < ' /> 
    <select id='isselect_code' name='isselect_code' multiple> 
     <option value='3'>tata</option> 
     <option value='4'>tutu</option> 
    </select> 
</div> 

JS

$('[id^=\"btnRight\"]').click(function (e) { 

    var selectedOpts = $(this).prev('select option:selected'); 

    if (selectedOpts.length === 0) { 
     alert('Nothing to move.'); 
     e.preventDefault(); 
    } else { 
     $(this).next('select').append($(selectedOpts).clone()); 
     $(selectedOpts).remove(); 
    } 

}); 

$('[id^=\"btnLeft\"]').click(function (e) { 

    var selectedOpts = $(this).next('select option:selected'); 

    if (selectedOpts.length === 0) { 
     alert('Nothing to move.'); 
     e.preventDefault(); 
    } else { 
     $(this).prev('select').append($(selectedOpts).clone()); 
     $(selectedOpts).remove(); 
    } 

}); 

的 「_CODE」 一提的是在我的應用程序動態碼，這就是爲什麼我使用[^selector] ，而不是直接的ID選擇像(#)。

Answer 1

我設法得到它的工作重寫代碼成整潔的一行。

JSFiddle: (MOVE option to the other element) - http://jsfiddle.net/GJJQw/
JSFiddle: (COPY option to the other element) - http://jsfiddle.net/dEE7A/

在下面的代碼COPIES選擇元件到另一個選擇框。

$('[id^=\"btnRight\"]').click(function (e) { 
    $(this).prev('select').find('option:selected').clone().appendTo('#isselect_code'); 
}); 

$('[id^=\"btnLeft\"]').click(function (e) { 
    $(this).next('select').find('option:selected').clone().appendTo('#canselect_code'); 
}); 

如果你想MOVE（即從一個刪除和添加其他）。使用此：

$('[id^=\"btnRight\"]').click(function (e) { 
    $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code'); 
}); 

$('[id^=\"btnLeft\"]').click(function (e) { 
    $(this).next('select').find('option:selected').remove().appendTo('#canselect_code'); 
}); 

---

繼承人小一步一步細分：

// the button that was clicked 
$(this) 

// .next('select') = get the next <select> element 
.next('select'). 

// .find('option:selected') = get all the selected options 
.find('option:selected') 

// .remove() [or .clone()] = Remove or clone the found options 
.remove() // OR .clone() 

// .appendTo('#id-of-element') = Append the found elements to the other select box 
.appendTo('#canselect_code'); 

所以通過將.remove()更改爲.clone()您將C OPY選項到另一個選擇，否則remove()將從此select元素中刪除它，並將其附加到另一個。

Answer 2

請參閱該更新的小提琴，http://jsfiddle.net/NpTzR/1/

有在你的代碼的兩個問題，

1，獲取所選選項的代碼是錯誤的。以下是它應該如何。

var selectedOpts = $(this).prev('select').find('option:selected');

2，該代碼獲取到移動選項選擇是錯誤的。我想不到一個不使用css選擇器的方式來獲取選擇。在我看來，這樣做明顯地表達了意圖。

修改後的標記（添加CSS類到每個選擇）：

<div> 
    <select id='canselect_code' name='canselect_code' multiple class='fl js-rightSelect'> 
     <option value='1'>toto</option> 
     <option value='2'>titi</option> 
    </select> 
    <input type='button' id='btnRight_code' value=' > ' /> 
    <br> 
    <input type='button' id='btnLeft_code' value=' < ' /> 
    <select id='isselect_code' name='isselect_code' multiple class='fr js-leftSelect'> 
     <option value='3'>tata</option> 
     <option value='4'>tutu</option> 
    </select> 
</div> 

修改JS

$('[id^=\"btnRight\"]').click(function (e) { 

    var $selectedOpts = $(this).prev('select').find('option:selected'), 
     $nextSelect = $(this).siblings('.js-leftSelect'); 

    if ($selectedOpts.length === 0) { 
     alert('Nothing to move.'); 
     e.preventDefault(); 
    } else { 
     $nextSelect.append($selectedOpts.clone()); 
     $selectedOpts.remove(); 
    } 

}); 

$('[id^=\"btnLeft\"]').click(function (e) { 

    var $selectedOpts = $(this).next('select').find('option:selected'), 
     $prevSelect = $(this).siblings('.js-rightSelect'); 

    if ($selectedOpts.length === 0) { 
     alert('Nothing to move.'); 
     e.preventDefault(); 
    } else { 
     $prevSelect.append($selectedOpts.clone()); 
     $selectedOpts.remove(); 
    } 

}); 

Answer 3

謝謝你快速/質量的答案！

這工作完全在我的應用程序：http://jsfiddle.net/GJJQw/1/

我只是修改appendTo選擇，因爲我不知道下一個選擇的ID /名稱，和我在同一個Web窗體許多人（是的我知道，這是一個壞的和醜陋的形式，反正...）

JS：

$('[id^=\"btnRight\"]').click(function (e) { 
     $(this).prev('select').find('option:selected').remove().appendTo($(this).nextAll('select')); 
    }); 

    $('[id^=\"btnLeft\"]').click(function (e) { 
     $(this).next('select').find('option:selected').remove().appendTo($(this).prevAll('select')); 
    }); 

惡魔oneliner 3 :-)

再次感謝 埃裏克

Answer 4

試試這個javascript代碼

$(document).ready(function(){ 
    $("#btnRight_code").click(function(){ 
    $("#canselect_code option:selected").remove().appendTo($("#isselect_code")); 
}) 
    $("#btnLeft_code").click(function(){ 
    $("#isselect_code option:selected").remove().appendTo($("#canselect_code")); 
}) 
});