javascript - how to add all and remove all options in dual 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=".3.1/css/bootstrap.min.css">
<script src=".3.1/js/bootstrap.min.js"></script>
<script src=".3.1.slim.min.js"></script>
<script src=".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 mas here">

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

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./bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mas here">

Share Improve this question edited Nov 29, 2019 at 7:56 Mukyuu 6,7798 gold badges41 silver badges63 bronze badges asked Nov 29, 2019 at 6:21 Joe 5861 gold badge10 silver badges37 bronze badges

Do you want to keep the item on add in the original? And what do you mean by "and how to disable selected options, i mean restrict selected options?" Do you want the option to be unselectable once added? – Mukyuu Commented Nov 29, 2019 at 7:14
@Mukyuu - yes restrict selected options, once selected the original option not allow to select 2nd time. exactly you thinking unselectable once added.. – Joe Commented Nov 29, 2019 at 7:21

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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./bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mas 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();.

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 par = $('#lstBox2 option');
  
  if($(selectedOpts).text() == $(par).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./bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mas here">

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./bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mas here">

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./bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./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 mas here">

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to add all and remove all options in dual list box? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)