Jquery實(shí)現(xiàn)select multiple左右添加和刪除功能的簡(jiǎn)單實(shí)例
項(xiàng)目要實(shí)現(xiàn)這樣的一個(gè)功能(如下圖所示):選擇左邊下拉列表框中的選項(xiàng),點(diǎn)擊添加按鈕,把選擇的選項(xiàng)移動(dòng)到右邊的下拉列表框中,同樣的選擇右邊的選項(xiàng),點(diǎn)擊刪除按鈕,即把選擇的選項(xiàng)移動(dòng)到左邊的下拉列表框中.相信用js很多朋友都寫(xiě)過(guò),下面是我用jQuery來(lái)實(shí)現(xiàn)這樣的功能的。
具體代碼如下:
<center> <table> <tr align="center"> <td colspan="3"> 選擇 </td> </tr> <tr> <td> <select id="fb_list" name="fb_list" multiple="multiple" size="8" style="width: 300px; height:200px;"> </select> </td> <td> <input type="button" id="selectup" name="selectup" value="上移∧" /> <br /> <input type="button" id="add" name="add" value="添加>>" /> <br /> <input type="button" id="delete" name="delete" value="<<移除" /> <br /> <input type="button" id="selectdown" name="selectdown" value="下移∨" /> </td> <td> <select id="select_list" name="select_list" multiple="multiple" size="8" style="width: 300px; height:200px;"> </select> </td> </tr> </table> </center> $(function(){ $.post('testAction!excute.action',null,function(data){ // var to_data = eval('('+data+')'); var array = eval(data); var obj = document.getElementById("fb_list"); var value = ""; for(var i=0;i<array.length;i++){ value = array[i].id + "/" + array[i].name + "/" + array[i].tel; obj.options[i] = new Option(value,value); //obj.add(newOption); } }) }); //向右移動(dòng) $(function(){ $("#add").click(function(){ if($("#fb_list option:selected").length>0) { $("#fb_list option:selected").each(function(){ $("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); $(this).remove(); }) } else { alert("請(qǐng)選擇要添加的分包!"); } }) }) //向左移動(dòng) $(function(){ $("#delete").click(function(){ if($("#select_list option:selected").length>0) { $("#select_list option:selected").each(function(){ $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); $(this).remove(); }) } else { alert("請(qǐng)選擇要?jiǎng)h除的分包!"); } }) }) //向上移動(dòng) $(function(){ $("#selectup").click(function(){ if($("select[name='fb_list'] option:selected").length > 0){ $("select[name='fb_list'] option:selected").each(function(){ $(this).prev().before($(this)); }) }else{ alert("請(qǐng)選擇要移動(dòng)的數(shù)據(jù)!"); } }) }) //向下移動(dòng) $(function(){ $("#selectdown").click(function(){ if($("select[name='fb_list'] option:selected").length > 0){ $("select[name='fb_list'] option:selected").each(function(){ //$(this).next().after($(this)); $(this).insertAfter($(this).next()); }) }else{ alert("請(qǐng)選擇要移動(dòng)的數(shù)據(jù)!"); } }) })
以上這篇Jquery實(shí)現(xiàn)select multiple左右添加和刪除功能的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
用jquery實(shí)現(xiàn)的彈出菜單插件2008-12-12jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖時(shí)顯示大圖的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖時(shí)顯示大圖的方法,涉及圖片及鼠標(biāo)操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12Jquery節(jié)點(diǎn)遍歷next與nextAll方法使用示例
next()方法用于獲取“節(jié)點(diǎn)之后”挨著它的第一個(gè)“同類同輩”元素。nextAll()方法用于獲取“節(jié)點(diǎn)之后”所有的元素2014-07-07從jquery的過(guò)濾器.filter()方法想到的
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù),然后根據(jù)函數(shù)的返回值判斷,這就是jquery選擇器的過(guò)濾器,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-09-09JQUERY 設(shè)置SELECT選中項(xiàng)代碼
本篇文章主要是對(duì)JQUERY 設(shè)置SELECT選中項(xiàng)的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02