兩個select下拉選單的option相互移動

螞蟻小編發表於2017-03-16

本章節介紹一下如何挪動兩個select下拉選單中的option項，下面就是一個能夠實現此功能的jquery程式碼。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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()一章節。

相關文章