交换下拉菜单中的值，其中两个下拉菜单包含相同的值

Question

我正在尝试重新创建在特定网站上找到的功能，其中用户可以单击按钮来交换开始位置和结束位置，以便开始位置下拉列表中的条目值与结束位置下拉列表交换价值。

最初这似乎很简单（更改选择的值），但如果两个下拉列表包含相同的值，我将如何 point/update 每个下拉列表与相应的匹配项目，而不是复制任何通过交换文本来下拉条目？

到目前为止，这是我的代码：

<div class="row">
    <div class="col-md-3">
        <select class="form-control">
            <option disabled="" selected="">Start</option>
            <option>Lab</option>
            <option>Hall</option>
            <option>Apartments</option>
            <option>Church</option>
            <option>Park</option>
            <option>College</option>
        </select>
    </div>
    <div class="col-md-1">
        <button>Swap</button><br/><br/>
    </div>
    <div class="col-md-3">
        <select class="form-control">
            <option disabled="" selected="">End</option>
            <option>Lab</option>
            <option>Hall</option>
            <option>Apartments</option>
            <option>Church</option>
            <option>Park</option>
            <option>College</option>
        </select>
    </div>
</div>

Jsfiddle：http://jsfiddle.net/e0x1jc43/1/

Answer 1

您无需移动文本，只需交换值即可。将 class="swapbutton" 添加到交换按钮，并使用以下 jQuery:

$(".swapbutton").click(function() {
  var row = $(this).closest(".row");
  var start = row.find("div.col-md-3:first select");
  var end = row.find("div.col-md-3:last select");
  var temp = start.val();
  start.val(end.val());
  end.val(temp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <select class="form-control">
      <option disabled="" selected="">Start</option>
      <option>Lab</option>
      <option>Hall</option>
      <option>Apartments</option>
      <option>Church</option>
      <option>Park</option>
      <option>College</option>
    </select>
  </div>
  <div class="col-md-1">
    <button class="swapbutton">Swap</button>
    <br/>
    <br/>
  </div>
  <div class="col-md-3">
    <select class="form-control">
      <option disabled="" selected="">End</option>
      <option>Lab</option>
      <option>Hall</option>
      <option>Apartments</option>
      <option>Church</option>
      <option>Park</option>
      <option>College</option>
    </select>
  </div>
</div>

交换下拉菜单中的值，其中两个下拉菜单包含相同的值

Swap values in dropdown menus where both dropdowns contain the same values

jquery

drop-down-menu