jQuery 多选只是从一个选择框复制到另一个

Question

这里使用 jquery 多选。当我单击一个项目时，它会从一个选择框移动到另一个选择框，但我只需要从一个选择框复制到另一个选择框。我希望单击的项目始终可用于左选择框。有什么建议？

$(document).ready(function() {
  $('#undo_redo').multiselect();
});

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script>
<div class="container">
  <h1 style="margin:10px auto 50px auto; text-align:center">jQuery multiselect.js Example</h1>
  <div class="row">
    <div class="col-xs-5">
      <select name="from" id="undo_redo" class="form-control" size="13" multiple="multiple">
        <option value="1">C++</option>
        <option value="2">C#</option>
        <option value="3">Haskell</option>
        <option value="4">Java</option>
        <option value="5">JavaScript</option>
        <option value="6">Lisp</option>
        <option value="7">Lua</option>
        <option value="8">MATLAB</option>
        <option value="9">NewLISP</option>
        <option value="10">PHP</option>
        <option value="11">Perl</option>
        <option value="12">SQL</option>
        <option value="13">Unix shell</option>
      </select>
    </div>
    <div class="col-xs-2">
      <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>
      <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
      <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
      <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
      <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
      <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button>
    </div>
    <div class="col-xs-5">
      <select name="to" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>
    </div>
  </div>
</div>

Answer 1

我假设没有对剩余点击项的内置支持，所以我再次手动渲染选择元素，如下所示：

$('#multiselect').multiselect();

var arr = [];
$('#multiselect option').each(function() {
  //  console.log($(this).text() + ' ' + $(this).val());
  arr.push($(this).text());
});


$('button').click(function() {

  $("#multiselect").empty();
  for (var i = 0; i < arr.length; i++) {
    var node = document.createElement("option");
    var textnode = document.createTextNode(arr[i]);
    node.appendChild(textnode);
    document.getElementById("multiselect").appendChild(node);
  }
});

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-xs-5">
    <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
      <option value="1">C++</option>
      <option value="2">C#</option>
      <option value="3">Haskell</option>
      <option value="4">Java</option>
      <option value="5">JavaScript</option>
      <option value="6">Lisp</option>
      <option value="7">Lua</option>
      <option value="8">MATLAB</option>
      <option value="9">NewLISP</option>
      <option value="10">PHP</option>
      <option value="11">Perl</option>
      <option value="12">SQL</option>
      <option value="13">Unix shell</option>
    </select>
  </div>

  <div class="col-xs-2">
    <button type="button" id="multiselect_rightAll" class="btn btn-block">
            <i class="glyphicon glyphicon-forward"></i>
        </button>
    <button type="button" id="multiselect_rightSelected" class="btn btn-block">
            <i class="glyphicon glyphicon-chevron-right"></i>
        </button>
    <button type="button" id="multiselect_leftSelected" class="btn btn-block">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </button>
    <button type="button" id="multiselect_leftAll" class="btn btn-block">
            <i class="glyphicon glyphicon-backward"></i>
        </button>
  </div>

  <div class="col-xs-5">
    <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
  </div>
</div>

Answer 2

试试这个

$('.add').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list1 input:checked:not('.all')");
    var n = items.length;
  	if (n > 0) {
      items.each(function(idx,item){
        var choice = $(item);
        choice.prop("checked",false);
        choice.parent().appendTo("#list2");
      });
  	}
    else {
  		alert("Choose an item from list 1");
    }
});

$('.remove').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list2 input:checked:not('.all')");
	items.each(function(idx,item){
      var choice = $(item);
      choice.prop("checked",false);
      choice.parent().appendTo("#list1");
    });
});

/* toggle all checkboxes in group */
$('.all').click(function(e){
	e.stopPropagation();
	var $this = $(this);
    if($this.is(":checked")) {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",true);
    }
    else {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",false);
        $this.prop("checked",false);
    }
});

$('[type=checkbox]').click(function(e){
  e.stopPropagation();
});

/* toggle checkbox when list group item is clicked */
$('.list-group a').click(function(e){
  
    e.stopPropagation();
  
  	var $this = $(this).find("[type=checkbox]");
    if($this.is(":checked")) {
    	$this.prop("checked",false);
    }
    else {
    	$this.prop("checked",true);
    }
  
    if ($this.hasClass("all")) {
    	$this.trigger('click');
    }
});
 

.v-center {
  min-height:200px;
  display: flex;
  justify-content:center;
  flex-flow: column wrap;
}
    

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="container bootstrap snippet">
          <div class="row">
            <div class="col-md-12 text-center text-primary">
              <h3><span class="glyphicon glyphicon-th-large"></span>Interact with the elements of lists<span class="glyphicon glyphicon-th-large"></span></h3>
            </div>
            <div class="col-sm-4 col-sm-offset-1">
              <div class="list-group" id="list1">
                <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 1 <input title="toggle all" type="checkbox" class="all pull-right"></a>
                <a href="#" class="list-group-item">Second item <input type="checkbox" class="pull-right"></a>
                <a href="#" class="list-group-item">Third item <input type="checkbox" class="pull-right"></a>
                <a href="#" class="list-group-item">More item <input type="checkbox" class="pull-right"></a>
                <a href="#" class="list-group-item">Another <input type="checkbox" class="pull-right"></a>
              </div>
            </div>
            <div class="col-md-2 v-center">
              <button title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button>
              <button title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button>
            </div>
            <div class="col-sm-4">
              <div class="list-group" id="list2">
                <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 2 <input title="toggle all" type="checkbox" class="all pull-right"></a>
                <a href="#" class="list-group-item">Alpha <input type="checkbox" class="pull-right"></a>
                <a href="#" class="list-group-item">Charlie <input type="checkbox" class="pull-right"></a>
                <a href="#" class="list-group-item">Bravo <input type="checkbox" class="pull-right"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>