javascript - 如何添加和删除双列表框中的所有选项？(how to add all and remove all options in dual list box?)

Question

How to add and remove all options using the dual list box?

(如何使用双重列表框添加和删除所有选项？)

We are using one small dual list box, we want to add options left side to right side box, now its work for single selected options moves to the right side but we also want all options to move to the right side even remove all options using button click.

(我们正在使用一个小的双列表框，我们想在左侧框的左侧添加选项，现在单个选定选项的工作移到右侧，但是我们也希望所有选项移到右侧，甚至使用单击。)

and how to disable selected options, I mean restrict selected options?

(以及如何禁用选定的选项，我的意思是限制选定的选项？)

Here is my FIDDLE

(这是我的FIDDLE)

Here is the sample code:

(这是示例代码：)

 $(document).ready(function() { $('#btnRight').click(function(e) { var selectedOpts = $('#lstBox1 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox2').append($(selectedOpts).clone()); //$(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $('#btnLeft').click(function(e) { var selectedOpts = $('#lstBox2 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } //$('#lstBox1').append($(selectedOpts).clone()); $(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); }); function updateIDs() { $('#values').val(''); $('#lstBox2 option').each(function(index) { console.log($(this).val()); $('#values').val($('#values').val() + $(this).val() + ","); }); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <div class="col-sm-12"> <div class="col-xs-4"> Items to select <select id="lstBox1" style="width:40%" multiple="multiple" class="form-control" size=10> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div class="col-xs-2" style="width:20%"> <a id="btnRight" class="btn btn-block btn-primary">Add</a> <a id="btnLeft" class="btn btn-block btn-primary">Remove</a> <a id="btnRightall" class="btn btn-block btn-primary">Add all</a> <a id="btnLeftall" class="btn btn-block btn-primary">Remove all</a> </div> <div class="col-xs-4" style="width:40%"> Selected Items <select id="lstBox2" multiple="multiple" class="form-control" size=10> </select> </div> </div> <input id="values" class="form-control" placeholder="Output IDs separated by commas here"> 

  ask by Joe translate from so

Answer 1

As far as i understand, you want to add all the items from list1 to list2.

(据我了解，您想将所有项目从list1添加到list2。)

add this part of code

(添加这部分代码)

$('#btnRightall').click(function(e){
 $('#lstBox1 option').prop('selected', true);
 var selectedOpts = $('#lstBox1 option').prop('selected', true);
 $('#lstBox2').append($(selectedOpts).clone());
 e.preventDefault();
 updateIDs();
});

Here is the working example of what i tried, upvote and mark it as accepted if it solves your problem.

(这是我尝试过的工作示例，如果可以解决您的问题，请对其进行投票并标记为接受。)

 $(document).ready(function() { $('#btnRight').click(function(e) { var selectedOpts = $('#lstBox1 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox2').append($(selectedOpts).clone()); //$(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $('#btnLeft').click(function(e) { var selectedOpts = $('#lstBox2 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } //$('#lstBox1').append($(selectedOpts).clone()); $(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $('#btnRightall').click(function(e){ $('#lstBox1 option').prop('selected', true); var selectedOpts = $('#lstBox1 option').prop('selected', true); $('#lstBox2').append($(selectedOpts).clone()); e.preventDefault(); updateIDs(); }); $('#btnLeftall').click(function(){ var selectedOpts = $('#lstBox2 option').prop('selected', true); $(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); }); function updateIDs() { $('#values').val(''); $('#lstBox2 option').each(function(index) { console.log($(this).val()); $('#values').val($('#values').val() + $(this).val() + ","); }); } 

 .col-lg-3 { border: 1px solid; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <div class="col-sm-12"> <div class="col-xs-4"> Items to select <select id="lstBox1" style="width:40%" multiple="multiple" class="form-control" size=10> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div class="col-xs-2" style="width:20%"> <a id="btnRight" class="btn btn-block btn-primary">Add</a> <a id="btnLeft" class="btn btn-block btn-primary">Remove</a> <a id="btnRightall" class="btn btn-block btn-primary">Add all</a> <a id="btnLeftall" class="btn btn-block btn-primary">Remove all</a> </div> <div class="col-xs-4" style="width:40%"> Selected Items <select id="lstBox2" multiple="multiple" class="form-control" size=10> </select> </div> </div> <input id="values" class="form-control" placeholder="Output IDs separated by commas here">