Javascript 如何使用jquery交换选择列表中的值？

我有两个简单的选择列表，希望添加一个选项来交换其中的值。第一个列表是e。G值1，另一个列表的值为2。单击“交换”按钮时，第一个按钮的值应为2，第二个按钮的值应为1

以下是JSFIDLE：

以下是HTML代码：

<div class="form-item-from">
  <label for="form-item-from">From </label>
 <select class="form-select" id="form-item-from"><option value="ONE">ONE</option></select>
</div>

<div class="form-item-to">
  <label for="form-item-to">From </label>
 <select class="form-select" id="form-item-to"><option value="TWO">TWO</option></select>
</div>

<a href="">Swap values</a>

然而，在这种情况下，这是行不通的。此外，该功能不应依赖于选择列表或交换按钮的位置。我发现了一种解决方案，其中交换按钮必须位于两个列表之间。

请尝试以下方法：

当你点击链接时。。。 1将表单项中的所有选项从保存到变量中 2将“从项到”中的所有选项保存到变量中 3使用从到的选项从更新 4使用来自的选项更新到

$(function() {
    $("a").click(function() {
        var selectOne = $("#form-item-from").html();
        var selectTwo = $("#form-item-to").html();

        $("#form-item-from").html(selectTwo);
        $("#form-item-to").html(selectOne);
        // stops the link going anywhere
        return false;
    });
});

试着这样做：

当你点击链接时。。。 1将表单项中的所有选项从保存到变量中 2将“从项到”中的所有选项保存到变量中 3使用从到的选项从更新 4使用来自的选项更新到

$(function() {
    $("a").click(function() {
        var selectOne = $("#form-item-from").html();
        var selectTwo = $("#form-item-to").html();

        $("#form-item-from").html(selectTwo);
        $("#form-item-to").html(selectOne);
        // stops the link going anywhere
        return false;
    });
});

---

类似这样的方法会奏效：

$("#SwapButton").click(function(e) {
    e.preventDefault();//This prevents the A tag from causing a page reload

    //Get the values
    var fromVal = $("#form-item-from option:selected").val();
    var fromText = $("#form-item-from option:selected").text();
    var toVal = $("#form-item-to option:selected").val();
    var toText = $("#form-item-to option:selected").text();

    //Set the values
    $("#form-item-from option:selected").val(toVal);
    $("#form-item-from option:selected").text(toText);
    $("#form-item-to option:selected").val(fromVal);
    $("#form-item-to option:selected").text(fromText);
});​

---

注意：这将仅切换所选的选项项。如果这不是你想要的，那么我误解了，你最好使用亚当的解决方案。这说明了它只交换所选值的事实。

类似的操作将起作用：

$("#SwapButton").click(function(e) {
    e.preventDefault();//This prevents the A tag from causing a page reload

    //Get the values
    var fromVal = $("#form-item-from option:selected").val();
    var fromText = $("#form-item-from option:selected").text();
    var toVal = $("#form-item-to option:selected").val();
    var toText = $("#form-item-to option:selected").text();

    //Set the values
    $("#form-item-from option:selected").val(toVal);
    $("#form-item-from option:selected").text(toText);
    $("#form-item-to option:selected").val(fromVal);
    $("#form-item-to option:selected").text(fromText);
});​

注意：这将仅切换所选的选项项。如果这不是你想要的，那么我误解了，你最好使用亚当的解决方案。这说明它只交换选定的值。

试试这个

$("a").click(function(e){
    e.preventDefault();        
    var a = jQuery("#form-item-from").html();
    var b = jQuery("#form-item-to").html();
    jQuery("#form-item-from").html(b);
    jQuery("#form-item-to").html(a);
})​

演示：

试试这个

$("a").click(function(e){
    e.preventDefault();        
    var a = jQuery("#form-item-from").html();
    var b = jQuery("#form-item-to").html();
    jQuery("#form-item-from").html(b);
    jQuery("#form-item-to").html(a);
})​

---

---

演示：

是否要切换所有选项？或者只选择一个？您需要编写代码将链接与js绑定？示例不是很明确，因为每个选择只有一个选项，而且它们是不同的。值更改所需的代码比html修改所需的代码少。对选择和目标之间的关系进行完整解释是否要切换所有选项？或者只选择一个？您需要编写代码将链接与js绑定？示例不是很明确，因为每个选择只有一个选项，而且它们是不同的。值更改所需的代码比html修改所需的代码少。对于仅交换所选项目的示例，请完整解释所选项目与目标+1的关系。可能对其他人有用，这个选项选择了一个类，所以这就是我需要的。非常感谢。Sry，忘了，因为我在检查谁先回答，然后意识到我需要选择选项。无论如何，现在接受答案：对于仅交换所选项目的示例，使用clone和replaceWith+1可以大大简化。可能对其他人有用，这个选项选择了一个类，所以这就是我需要的。非常感谢。Sry，忘了，因为我在检查谁先回答，然后意识到我需要选择选项。无论如何，答案现在被接受了：使用clone和ReplaceWith可以大大简化。我不喜欢这个答案，您的示例代码并没有演示如何阻止标记的默认操作。如果有人像您发布的那样使用此答案，那么他们可能会遇到页面刷新问题。请查看JSFIDLE代码，我使用了href=javascript:void0是的，我知道您是如何做到这一点的，但您不应该假设该链接始终有效。我个人也不喜欢这样混用内联javascript——这会使理解和查找错误变得更加困难。我不喜欢这个答案，您的示例代码并没有演示如何阻止标记的默认操作。如果有人像您发布的那样使用此答案，那么他们可能会遇到页面刷新问题。请查看JSFIDLE代码，我使用了href=javascript:void0是的，我知道您是如何做到这一点的，但您不应该假设该链接始终有效。我个人也不喜欢这样混合内联javascript——这会使理解和查找错误变得更加困难谢谢你的回答，它是有效的，但我忘了提到，如果选择了选项，它们已经选择了类。我认为没有区别。谢谢你的回答，它是有效的，但我忘了提到，如果选项被选中，它们已经选择了类。我认为没有区别。