江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

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

admin••questions•阅读0

How to add and remove all options using the dual list box?We are using one small dual list box, we want

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?

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./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
  • jquery
  • html
  • css
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 JoeJoe 5861 gold badge10 silver badges37 bronze badges 2
  • 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

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742331716a4423851.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信