title: how to add all and remove all options in dual list box?
body: <p>How to add and remove all options using the dual list box?</p>
  
  <p>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.</p>
  
  <p>and how to disable selected options, I mean restrict selected options?</p>
  
  <p>Here is my <strong><a href="https://jsfiddle.net/joelshah/hg5wLfn9/" rel="nofollow noreferrer">FIDDLE</a></strong></p>
  
  <p>Here is the sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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() + ",");
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="col-sm-12"&gt;
  
  
    &lt;div class="col-xs-4"&gt;
      Items to select
      &lt;select id="lstBox1" style="width:40%" multiple="multiple" class="form-control" size=10&gt;
        &lt;option value="1"&gt;Test 1&lt;/option&gt;
        &lt;option value="2"&gt;Test 2&lt;/option&gt;
        &lt;option value="3"&gt;Test 3&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-2" style="width:20%"&gt;
      &lt;a id="btnRight" class="btn btn-block btn-primary"&gt;Add&lt;/a&gt;
      &lt;a id="btnLeft" class="btn btn-block btn-primary"&gt;Remove&lt;/a&gt;
      &lt;a id="btnRightall" class="btn btn-block btn-primary"&gt;Add all&lt;/a&gt;
      &lt;a id="btnLeftall" class="btn btn-block btn-primary"&gt;Remove all&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="col-xs-4" style="width:40%"&gt;
      Selected Items
      &lt;select id="lstBox2" multiple="multiple" class="form-control" size=10&gt;
  
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input id="values" class="form-control" placeholder="Output IDs separated by commas here"&gt;</code></pre>
  </div>
  </div>
  </p>