1

我有两个简单的选择列表，并想添加一个选项来交换其中的值。因此，第一个列表的值为“ONE”，另一个列表的值为“TWO”。当您单击“交换”按钮时，第一个的值应为“TWO”，第二个的值应为“ONE”。

这是 jsFiddle：http: //jsfiddle.net/YPyRF

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

这是js代码（来自Is there a native jQuery function to switch elements?）：

jQuery("#form-item-from").after(jQuery("#form-item-to"));

但是，这在这种情况下不起作用。此外，该功能不应依赖于选择列表或交换按钮的位置（我找到了一种解决方案，其中交换按钮必须位于两个列表之间）。

4

3 回答 3

5

像这样的东西会起作用：

$("#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);
});​

这是您的小提琴，已更新

注意：这只会切换option选中的项目。如果这不是您想要的，那么我误解了，您可能会更好地使用亚当的解决方案。这是一个更好的示例，它说明了它仅交换所选值的事实。

于 2012-10-22T09:53:52.370 回答
2

尝试这样的事情：jsfiddle

当您单击链接时...
1) 将 #form-item-from 中的
所有选项保存到变量中 2) 将 #from-item-to 中的所有选项保存到变量中
3) 使用来自的选项更新 #from #to
4) 使用来自 #from 的选项更新 #to

$(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;
    });
});
于 2012-10-22T09:53:42.027 回答
2

试试这个，

$("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);
})​

演示：http: //jsfiddle.net/jQACe/3/

于 2012-10-22T09:58:11.123 回答