两个select下拉菜单的option相互移动

两个select下拉菜单的option相互移动:
本章节介绍一下如何挪动两个select下拉菜单中的option项，下面就是一个能够实现此功能的jquery代码。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(function(){
  $("#car_type_list").dblclick(function(){
    var s_val = this.value;
    if(s_val == '') return;
    $(this).children("option[value='"+s_val+"']").remove();
    $("#car_type").append('<option value="'+s_val+'">'+s_val+'</option>');
    $("#car_type_val").val($("#car_type_val").val()+s_val+"@");
});
$("#car_type").dblclick(function(){
   var s_val = this.value;
   if(s_val == '') return;
   $(this).children("option[value='"+s_val+"']").remove();
   $("#car_type_list").append('<option value="'+s_val+'">'+s_val+'</option>');
   var now_val = $("#car_type_val").val();
   now_val = now_val.replace(s_val+"@","");
   $("#car_type_val").val(now_val);
});
}) 
</script>
</head>
<body>
<input type="hidden" name="car_type" value="" id="car_type_val" />
<select multiple="multiple" id="car_type">
</select>
<select multiple="multiple" id="car_type_list">
  <option value="蚂蚁部落一">蚂蚁部落一</option>
  <option value="蚂蚁部落二">蚂蚁部落二</option>
  <option value="蚂蚁部落三">蚂蚁部落三</option>
  <option value="蚂蚁部落四">蚂蚁部落四</option>
  <option value="蚂蚁部落五">蚂蚁部落五</option>
  <option value="蚂蚁部落六">蚂蚁部落六</option>
  <option value="蚂蚁部落七">蚂蚁部落七</option>
</select>
</body>
</html>

上面的代码实现我们想要的效果，原理非常的简单，就是为指定元素追加子元素，具体就不多介绍了，如有任何问题可以跟帖留言或者参阅相关阅读。

相关阅读:
1.children()函数可以参阅jQuery的children()方法一章节。
2.dblclick事件可以参阅jQuery的dblclick事件一章节。
]3.remove()函数可以参阅jQuery的remove()方法一章节。
4. append()函数可以参阅jQuery的append()方法一章节。
5.replace()函数可以参阅正则表达式replace()函数一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13770

更多内容可以参阅:http://www.softwhy.com/jquery/

两个select下拉菜单的option相互移动

猜你喜欢