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

我有两个简单的选择列表，并希望添加一个选项来交换它们中的值。 因此，第一个列表具有例如值“ONE”而另一个列表具有值“TWO”。 单击“交换”按钮时，第一个应具有值“TWO”，第二个应具有值“ONE”。

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

这是HTML代码：

 From  ONE 
 
 From  TWO 
 Swap values 

这是js代码（来自是否有一个原生的jQuery函数来切换元素？ ）：

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

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

Answer 1

这样的东西会起作用：

 $("#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 。 如果这不是您想要的，那么我就会误解，您可能更好地使用Adam的解决方案。 这是一个更好的例子 ，说明了它只交换选定的值。

Answer 2

试试这样的事： jsfiddle

当您点击链接时……
1）将＃form-item-from中的所有选项保存到变量中
2）将＃from-item-to中的所有选项保存到变量中
3）使用#to中的选项更新#from
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; }); }); 

Answer 3

试试这个，

 $("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/