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

Question

我使用2个select元素，当单击按钮时，无法交换select字段中的城市：

​

​

<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>

Answer 1

首先，逻辑步骤是：

这两个列表必须是相同的数据，准确的数据(值和文本)才能进行交换。

2-将Click事件处理程序添加到按钮中。如下.。

第二，守则：

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>

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>

​

Answer 3

您必须使用jQuery手动交换元素。也就是说，反转从选择到选择。一个干净的方法是创建一个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);