Question

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

<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

假设您的意思是将整个depatures列表与整个到达列表交换，这可以：

/* 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 2

首先逻辑步骤是：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 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);

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

3 个答案: