how to add all and remove all options in dual list box?

how to add all and remove all options in dual list box?

bootstrap dual listbox
bootstrap listbox add remove
bootstrap dual listbox set selected values
bootstrap dual listbox get selected values
bootstrap dual listbox mvc example
dual list box javascript
jquery remove selected options from multiple select
html add/remove list box

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

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

Bootstrap Dual Listbox, Responsive dual select boxes (dual list boxes) for Bootstrap. Dynamically add options to the selects removeSelectedLabel, 'Remove selected' : the label for the "Remove Selected" button. You can modify the behavior and aspect of the dual listbox by calling its methods, all of which accept a value and a refresh option. list box id is student and it is already having some options. To add more options we have to use this line . $("#student").append("<option value=" + to_add +">"+to_add+"</option>"); In the above line to_add is the variable which stores the new option to be added. We will try to use one text box and user can enter text and add the same as option


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

Dropdown listbox adding removing multiple options by jQuery, Here all listbox have common class=my_class. $(".my_class").change(function(){ // change function of listbox var var_value = $(this).val(); // reading listbox� 'Remove all': the label for the "Remove All" button. moveOnSelect: true: determines whether to move options upon selection. This option is forced to true on the Android browser. preserveSelectionOnMove: false: can be 'all' (for selecting both moved elements and the already selected ones in the target list) or 'moved' (for selecting moved


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

Example Listboxes with Rearrangeable Options, If the listbox element does not contain any options, aria-activedescendant All option elements have a value set for aria-selected . For example, Enter performs an add only when focus is in the available options list, and Delete performs a� - If the "Add All" button is pressed all of the items in are moved from the available list to the choosen list. - If the "Remove" button is pressed the selected item(s) are moved from the choosen list to the available list. - If the "Remove All" button is pressed all of the items in are moved from the choosen list to the available list.


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

Add and Remove Multiple or Single Select Options using jQuery, Similarly, you can add multiple items to an existing list or remove all the items and add a fresh list of items. Note: I have added the markup section in the first� A pure JavaScript plugin that converts the normal select box into a searchable dual list box where the users are able to move options between two selection panels. How to use it: Add the stylesheet ‘dual-listbox.css’ and JavaScript file ‘dual-listbox.js’ to the webpage.


jQuery Dual List Box Plugins, Filterable Dual List Box With Move/Remove All Buttons easy jQuery plugin to create dual multi-select boxes where the user can move options between source � A lightweight and simple-to-use jQuery multiple selection (dual list box) plugin which enables the user to move options between two select boxes a button-based interface. Also support dynamic data rendering (JSON+AJAX) and data ordering. How to use it: 1. To use this plugin, include the following JavaScript and CSS files on the webpage.


That double list box editor, Bootstrap Duallistbox - v3.0.5 * A responsive dual listbox widget optimized for Twitter window, document, undefined) { // Create the defaults once var pluginName all', removeSelectedLabel: 'Remove selected', removeAllLabel: ' Remove all', filter the selected options infoText: 'Showing all {0}', // text when all options� Remove the file names from the list box after the selected files have been deleted. In the following C++ code example, the dialog box procedure initializes the multiple-selection list box (IDC_FILELIST) by using the DlgDirList function to fill the list box with the names of all the files in the current directory.


Bootstrap Dual Listbox, Responsive dual select boxes (dual list boxes) for Bootstrap. Twitter Bootstrap. It works on all modern browsers and on touch devices. Add options to demo2 After which you can initialize the dual list box as a jQuery plugin like so: $('some-name').DualListBox();. There are also some options associated with this plugin. Options / API. There are currently two ways to use this component. First up is by using html5 data-* attributes embedded in the select tag, but you can also provide a Javascript