使用 jQuery 在选择列表中交换值

Question

我正在尝试在单击链接时将选择选项值与 jQuery 交换，目前它只是在单击链接时重置选择，不知道出了什么问题？：

jQuery:

$(function () {
    $("#swapCurrency").click(function (e) {
        var selectOne = $("#currency-from").html();
        var selectTwo = $("#currency-to").html();
        $("#currency-from").html(selectTwo);
        $("#currency-to").html(selectOne);
        return false;
    });
});

这里是 JS 小提琴：http://jsfiddle.net/tchh2/

Answer 1

我是一步一步写的，这样比较容易理解：

$("#swapCurrency").click(function (e) {

    //get the DOM elements for the selects, store them into variables
    var selectOne = $("#currency-from");
    var selectTwo = $("#currency-to");

    //get all the direct children of the selects (option or optgroup elements)
    //and remove them from the DOM but keep events and data (detach)
    //and store them into variables
    //after this, both selects will be empty
    var childrenOne = selectOne.children().detach();
    var childrenTwo = selectTwo.children().detach();

    //put the children into their new home
    childrenOne.appendTo(selectTwo);
    childrenTwo.appendTo(selectOne);

    return false;
});

jsFiddle Demo

您的方法适用于将 DOM 元素转换为 HTML 并返回。问题是这样会丢失重要信息，比如哪个元素是 selected（它存储在 DOM 属性中，而不是 HTML 属性中，它只是给出了起点）。

• children()
• detach()
• appendTo()

Answer 2

发生这种情况是因为您从两个 <select> 字段中删除了所有元素并再次将它们设置为新元素。要使其按预期工作，您最好将 actual 元素按如下方式移动：

$("#swapCurrency").click(function(e) {
    var options = $("#currency-from > option").detach();
    $("#currency-to > option").appendTo("#currency-from");
    $("#currency-to").append(options);
    return false;
});

演示： http://jsfiddle.net/tchh2/2/

Answer 3

您正在替换 <select> 中的整个 HTML（每个选项）。只要每个 select 的选项数量相同且相互对应，就可以使用 selected 索引属性进行交换：

$("#swapCurrency").click(function (e) {
    var selOne = document.getElementById('currency-from'),
        selTwo = document.getElementById('currency-to');
    var selectOne = selOne.selectedIndex;
    var selectTwo = selTwo.selectedIndex;
    selOne.selectedIndex = selectTwo;
    selTwo.selectedIndex = selectOne;
    return false;
});

JSFiddle