如何在两个选择元素中交换所选选项？

Question

我使用了两个选择元素，但是当点击按钮时，无法在选择字段中交换城市：

<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value="1" selected>London(LGW)</option>
        <option value='2'>Paris(SHG)</option>
        <option value='3'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>

<select class="airport-select__arrival">
    <option value='1' selected>New York(JFK)</option>
    <option value='2'>London(LGW)</option>
    <option value='3'>Vancouver(VAI)</option>
</select>

- Nick Gl

---

请添加交换部分的代码。 - Jefferson

好奇--为什么出发城市选项的值与到达城市选项的值不同？我猜如果伦敦在两个列表中的值都是1，你会更容易处理。 - Nick

@heybignick 这实际上是必要的，否则他将无法发送一致的值到服务器，除非发送整个城市名称。 - forumulator

Answer 1

首先，逻辑步骤如下：
1- 两个列表必须具有相同的精确数据（值和文本），才能进行交换。
2- 将单击事件处理程序添加到按钮。如下所示...

其次，代码如下：

JQuery：

$(document).ready(function() {
    $(".select-swap").on('click', function (ev) {
        swaper();
    });
});

function swaper () {
    var co=$(".airport-select__departure").val();
    $(".airport-select__departure").val($(".airport-select__arrival").val());
    $(".airport-select__arrival").val(co);
}

HTML:

<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value='1' selected>London(LGW)</option>
        <option value='2'>New York(JFK)</option>
        <option value='3'>Paris(SHG)</option>
        <option value='4'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>
<select class="airport-select__arrival">
    <option value='1'>London(LGW)</option>
    <option value='2' selected>New York(JFK)</option>
    <option value='3'>Paris(SHG)</option>
    <option value='4'>Vancouver(VAI)</option>
</select>

- Mohamed Abulnasr

Answer 2

假设你想要交换整个出发列表和整个到达列表，可以使用以下方法实现：

/* Set a click handler for the button */
$('.select-wrapper > .select-swap').click(function() {
      /* Store the list of depatures and arrivals as they are */
      var $departures = $('.airport-select__departure option');
      var $arrivals = $('.airport-select__arrival option');

      /* Store the selected values */
      var departure = $('.airport-select__departure option:checked').text();
      var arrival = $('.airport-select__arrival option:checked').text();

      /* Swap the option lists */
      $('.airport-select__arrival').append($departures);
      $('.airport-select__departure').append($arrivals);

      /* Re-set the selected values */
      $('.airport-select__arrival option:contains(' + departure + ')').prop('selected', true);
      $('.airport-select__departure option:contains(' + arrival + ')').prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value="1" selected>London(LGW)</option>
        <option value='2'>Paris(SHG)</option>
        <option value='3'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>

<select class="airport-select__arrival">
    <option value='1' selected>New York(JFK)</option>
    <option value='2'>London(LGW)</option>
    <option value='3'>Vancouver(VAI)</option>
</select>

- jconder

Answer 3

你需要使用jQuery手动交换元素。也就是说，反转From和To的选择。一个简洁的方式是创建一个selectCity函数（这也应该是用户手动选择城市时的点击函数）。

我假设你有一个data-id属性来识别城市ID，除了你展示的内容。下面是如何进行交换：

function getSelected($sel) {
    return $sel.children("option[selected]").data("id");
}

function selectCity($sel, newId) {
    var $current = $sel.children("option[selected]");

    var $new;
    // Add attr selected to the city with newId
    ($new = $sel.children("option[data-id='" + newId + "']")).length
    && $new.attr("selected", "");

    if ($new.length) {      
        $current.removeAttr("selected");
    }
}

function swap() {
    var $from = $(".airport-select__departure"),
    $to = $(".airport-select__arrival");

    var fromId = getSelected($from),
    toId = getSelected($to);

    // Swap selections
    selectCity($from, toId);
    selectCity($to, fromId);
}

$(".select-swap").click(swap);

- forumulator

---

如果意图只是交换所选的到达城市和目的地城市，那么他需要做更多的工作，因为在这个例子中，所选的到达城市“纽约（JFK）”并不存在于目的地城市列表中。 - jconder

@jconder 我实际上错过了这一点。但是，他有两个选项：1）如果城市不存在，则添加城市；2）交换整个列表，这两种情况都没有意义。实际上，在航空旅行的情况下，城市列表在两侧实际上是完全相同的，具有相同的值和文本，正如Mohamed Abhulnasr在他上面的答案中指出的那样。 - forumulator

我不确定在如此有限的信息下声称什么是有意义的是否具有生产力，但至少第一种情况非常合理：从到达城市列表中限制所选出发城市，反之亦然，这是一个常见的应用程序：通常您不希望用户将同一城市提交为到达和出发目的地。 - jconder