快捷導(dǎo)航

jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享

更新時(shí)間：2015年11月21日 16:20:37 投稿：lijiao

這篇文章主要介紹了jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了select選擇框內(nèi)容左右移動(dòng)添加刪除。分享給大家供大家參考。具體如下：
select選擇框內(nèi)容左右移動(dòng)，簡(jiǎn)單實(shí)用，選中選項(xiàng)內(nèi)容，點(diǎn)擊移動(dòng)按鈕可進(jìn)行內(nèi)容左右移動(dòng)，運(yùn)行效果圖：

具體代碼如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>index</title>
</head>
<body>
 <div>
  <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>

  <span style="top: 30px; position: fixed;">
   <input type="button" value="<<" id="btnLeft" />
   <input type="button" value=">>" id="btnRight" />
  </span>
  
  <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">
   <option value="6">A</option>
   <option value="7">B</option>
   <option value="8">C</option>
   <option value="9">D</option>
   <option value="10">E</option>
  </select>
    
 </div>
 
 <br>
 
 <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />
 
 <script src="js/jquery-2.1.4.js"></script>
 <script>
  $("#btnRight").click(function () {
   //數(shù)據(jù)option選中的數(shù)據(jù)集合賦值給變量vSelect
   var vSelect = $("#leftSelector option:selected");
   //克隆數(shù)據(jù)添加到 rightSelector 中
   vSelect.clone().appendTo("#rightSelector");
   //同時(shí)移除 leftSelector 中的 option
   vSelect.remove();
  });
  
  //right move
  $("#btnLeft").click(function () {
   var vSelect = $("#rightSelector option:selected");
   vSelect.clone().appendTo("#leftSelector");
   vSelect.remove();
  });

  function selectAll() {
   var lst1 = window.document.getElementById("rightSelector");
   var length = lst1.options.length;
   for (var i = 0; i < length; i++) {
    var v = lst1.options[i].value; //option內(nèi)的value
    var t = lst1.options[i].text; //顯示的文本
    alert(v + ":" + t);
   }
  }
 </script>
 
</body>
</html>

希望本文對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼
有時(shí)間需要將表格的最后一行加上樣式，方便閱讀等需要，需要的朋友可以參考下。
2010-05-05
jquery對(duì)table中各數(shù)據(jù)的增加、保存、刪除操作示例
這篇文章主要介紹了jquery對(duì)table中各種數(shù)據(jù)的增加、保存、刪除操作,需要的朋友可以參考下
2014-05-05
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細(xì)介紹了Bootstrap的iCheck插件checkbox和radio的知識(shí)及bootstrap icheck獲取radio的value值的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-08-08
jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-06-06
Jquery加載時(shí)從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList實(shí)例
從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList，option選項(xiàng)value動(dòng)態(tài)賦值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
基于jQuery和CSS3制作響應(yīng)式水平時(shí)間軸附源碼下載
我們經(jīng)常看到有很多的垂直時(shí)間軸用來記錄事件進(jìn)展，而有朋友問我要求分享水平的時(shí)間軸，其實(shí)水平時(shí)間軸的難點(diǎn)在于自適應(yīng)屏幕尺寸。那么今天我要給大家分享的是一款支持響應(yīng)式、支持觸屏手勢(shì)滑動(dòng)的水平時(shí)間軸
2015-12-12
淺談jQuery事件綁定原理
這篇文章主要介紹了淺談jQuery事件綁定原理，并做了簡(jiǎn)單分析，然后用實(shí)例來展示,需要的朋友可以參考下
2015-01-01
JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
"元素拖拽改變大小"其實(shí)和"元素拖拽"一個(gè)原理,以下附出源碼原型，弄明白了原理再擴(kuò)展其他實(shí)際應(yīng)用，思路就變得簡(jiǎn)單、清晰得多了
2012-12-12
jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果,需要的朋友可以參考下
2014-06-06
使用jQuery操作HTML的table表格的實(shí)例解析
這篇文章主要介紹了使用jQuery操作HTML的table表格的實(shí)例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下
2016-03-03