Bootstrap选择jquery通过单击按钮将所有内容交换到两个选择标记

时间:2017-07-22 13:44:16

标签: javascript jquery twitter-bootstrap laravel bootstrap-select

#include <iostream>

class Base1 {
public:
    void foo() {}
};

class Derived1 : public Base1 {
    int i;
public:
    void foo() {}
};

class Base2 {
public:
     virtual ~Base2() {}
     virtual void foo() = 0;
};

class Derived2 : public Base2 {
    int i;
public:
     virtual ~Derived2() {}
     virtual void foo() {}
};

int main() {
    std::cout << "Size Derived1: " << sizeof(Derived1) << std::endl;
    std::cout << "Size Derived2: " << sizeof(Derived2) << std::endl;
}

我有它,我想让它全部选择反向的价值用一个按钮和动态的jQuery你可以帮我吗

样品 enter image description here 当我点击按钮将是 enter image description here 选中所有选项将移至&#34;来自&#34;选择

1 个答案:

答案 0 :(得分:0)

与我链接https://codepen.io/anon/pen/KvPREO的codepen一样,这里是代码:

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');
});