javascript選擇項相互移動切換效果

antzone發表於2017-03-24
JavaScript

在不少效果中有這樣的功能，就是能夠將選擇項實現左右移動，實現對不同內容的選擇效果。

一種比較簡單的實現效果，就是將option選項在兩個select中移動，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.sel{
  width:150px;
  height:200px;
} 
.btn{
  width:50px;
  font-weight:bold;
  font-size:14px; 
} 
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#sel_left,#sel_right").bind("change",checkBtn); 
  $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn); 
  checkBtn(); 
}); 
 
function checkBtn(){ 
  $("#sel_left>option").length>0?$("#btn_1").removeAttr("disabled"):$("#btn_1").prop("disabled",true); 
  $("#sel_left option:selected").length>0?$("#btn_2").removeAttr("disabled"):$("#btn_2").prop("disabled",true); 
  $("#sel_right option:selected").length>0?$("#btn_3").removeAttr("disabled"):$("#btn_3").prop("disabled",true); 
  $("#sel_right>option").length>0?$("#btn_4").removeAttr("disabled"):$("#btn_4").prop("disabled",true); 
} 
 
function clickBtn(e){ 
  if("btn_1" == e.target.id){ 
    $("#sel_left>option").appendTo("#sel_right"); 
  }
  else if("btn_2" == e.target.id){ 
    $("#sel_left option:selected").appendTo("#sel_right"); 
  }
  else if("btn_3" == e.target.id){ 
    $("#sel_right option:selected").appendTo("#sel_left"); 
  }
  else if("btn_4" == e.target.id){ 
    $("#sel_right>option").appendTo("#sel_left"); 
  } 
  checkBtn(); 
} 
</script>
</head>
<body>
<table>
  <tr>
    <td>
      <select multiple class="sel" id="sel_left">
        <option value="a">螞蟻部落一</option>
        <option value="b">螞蟻部落二</option>
        <option value="c">螞蟻部落三</option>
        <option value="d">螞蟻部落四</option>
        <option value="e">螞蟻部落五</option>
      </select>
    </td>
    <td>
      <p><button class="btn" id="btn_1">>> </button></p>
      <p><button class="btn" id="btn_2">></button></p>
      <p><button class="btn" id="btn_3"><</button></p>
      <p><button class="btn" id="btn_4"><<</button></p>
    </td>
    <td>
      <select multiple class="sel" id="sel_right">
        <option value="f">螞蟻部落六</option>
      </select>
    </td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，點選相應的按鈕可以實現移動效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，文件結構載入完畢之後再去執行函式中的程式碼。

2.$("#sel_left,#sel_right").bind("change",checkBtn)，為兩個select下拉選單註冊change事件處理函式。

3.$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn),為中間的4個方向按鈕註冊click事件處理函式。

4.checkBtn()，呼叫函式。

5.function checkBtn(){}，此函式可以根據不同的情況設定方向鍵按鈕是否可用。

6.$("#sel_left>option").length>0?$("#btn_1").removeAttr("disabled") : $("#btn_1").prop("disabled",true),如果左側的select下拉選單的中的option選項數目大於零，那麼刪除第一個方向按鈕的disabled屬性，否則將此按鈕設定為不可用狀態。其他的也是同樣的道理。7.function clickBtn(e){}，作為中間方向鍵的事件處理函式，e為傳遞的事件物件。

8.if("btn_1" == e.target.id){$("#sel_left>option").appendTo("#sel_right"); }，如果是點選的第一個方向按鈕，那麼將左邊select下拉選單裡面的所有option項移到右邊的select下拉選單中。

二.相關閱讀:

1.removeAttr()函式可以參閱jQuery removeAttr()一章節。

2.prop()函式可以參閱jQuery prop()一章節。

3.target屬性可以參閱jQuery event.target一章節。

4.appendTo()函式可以參閱jQuery appendTo()一章節。

相關文章