Bootstrap Select jquery 单击按钮交换两个 select 标签处的所有内容

Question

<div class="form-group col-md-2">
    {{ Form::label('from', null, ['class' => 'control-label']) }}
    <select name="from" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true">
        <option value="1">Airport</option>
    </select>
</div>
<div class="form-group col-md-1">
    <input type="button" value="swap" id="swap">
</div>
<div class="form-group col-md-2">
    {{ Form::label('to', null, ['class' => 'control-label']) }}
    <select name="to" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true">
        @foreach($services as $key => $value)
        <option value="{{$value->id}}">{{ $value->location }}</option>
        @endforeach
    </select>
</div>

我有，我想让它的所有值 select reverse 使用按钮和 jQuery 动态你能帮我吗

样本当我点击按钮时选择所有选项将移动到 "from" select

Answer 1

正如我链接的 codepen https://codepen.io/anon/pen/KvPREO，这里是代码：

HTML:

    <html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
</head>
<body>

<div class="wrapper">
  <div id="select-from-container" class="form-group col-md-2">
    <select class="selectpicker form-control mySel" multiple data-max-options="1" required="true">
      <option value="1">Airport</option>
    </select>
  </div>

  <div class="form-group col-md-1">
    <input type="button" value="Swap" id="swap">
  </div>  

  <div id="select-to-container" class="form-group col-md-2">
    <select class="selectpicker form-control mySel" multiple data-max-options="1" required="true">
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
    </select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Javascript:

$('#select-to-container select').selectpicker();
$('#select-from-container select').selectpicker();

$('#swap').on('click', function(){
  // get current selections
  select_to_value = $('#select-to-container select').val()
  select_from_value = $('#select-from-container select').val()

  // Copying selects
  select_to = $('#select-to-container select').clone();
  select_from = $('#select-from-container select').clone();

  // taking original names
  select_to_name = $('#select-to-container select').prop('name');
  select_from_name = $('#select-from-container select').prop('name');

  // cleaning up
  $('#select-to-container').html('');
  $('#select-from-container').html('');

  // add selects again
  $('#select-to-container').html(select_from);
  $('#select-to-container select').prop('name',select_to_name);

  $('#select-from-container').html(select_to);
  $('#select-from-container select').prop('name',select_from_name);

  // re-bind selectpicker
  $('#select-to-container select').selectpicker();
  $('#select-from-container select').selectpicker();

  // re-select original selections
  $('#select-to-container select').val(select_from_value);
  $('#select-from-container select').val(select_to_value);

  // refresh selectpicker to show the selected values
  $('.selectpicker').selectpicker('refresh');
});

Bootstrap Select jquery 单击按钮交换两个 select 标签处的所有内容

Bootstrap Select jquery Swap everything at two select tag with a button click

javascript

jquery

twitter-bootstrap

laravel

bootstrap-select