如何添加和删除双列表框中的所有选项？

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

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">

Answer 1

As far as i understand, you want to add all the items from list1 to 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:

 $(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">

Answer 2

Please check this. And use disabled for restrict selected options?

 $(document).ready(function() { $('#btnRight').click(function(e) { var selectedOpts = $('#lstBox1 option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } var compar = $('#lstBox2 option'); if($(selectedOpts).text() == $(compar).text()){ alert("Nothing to move."); } else{ $('#lstBox2').append($(selectedOpts).clone()); 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)); $(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $("#btnRightall").click(function(e){ var selectedOpts = $('#lstBox1 option:not([disabled])'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox2').append($(selectedOpts).clone()); e.preventDefault(); updateIDs(); }); $("#btnLeftall").click(function(e){ var selectedOpts = $('#lstBox2 option'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $(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" disabled>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">

Answer 3

I think you're looking for something like this:

 $(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) { var selectedOpts = $('#lstBox1 option:not([disabled])'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#lstBox2').append($(selectedOpts).clone()); $(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $("#btnLeftall").click(function(e) { var selectedOpts = $('#lstBox2 option:not([disabled])'); 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">

JsFiddle

Once you cloned the item to the other side .append($(selectedOpts).clone()); , you can simply remove them from the original container $(selectedOpts).remove(); .

Answer 4

Hey try the below code and you can go through this fiddle too.

 $(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(); }); $('#btnRightall').click(function(e) { var selectedOptsAll = $('#lstBox1 option').prop('selected', true); $('#lstBox2').append($(selectedOptsAll).clone()); //$(selectedOpts).remove(); e.preventDefault(); updateIDs(); }); $('#btnLeftall').click(function(e) { var selectedOptsRemoveAll = $('#lstBox2 option').prop('selected', true); $(selectedOptsRemoveAll).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() + ","); }); }

 .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">