Jquery實現(xiàn)select multiple左右添加和刪除功能的簡單實例
項目要實現(xiàn)這樣的一個功能(如下圖所示):選擇左邊下拉列表框中的選項,點擊添加按鈕,把選擇的選項移動到右邊的下拉列表框中,同樣的選擇右邊的選項,點擊刪除按鈕,即把選擇的選項移動到左邊的下拉列表框中.相信用js很多朋友都寫過,下面是我用jQuery來實現(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); } }) }); //向右移動 $(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("請選擇要添加的分包!"); } }) }) //向左移動 $(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("請選擇要刪除的分包!"); } }) }) //向上移動 $(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("請選擇要移動的數(shù)據(jù)!"); } }) }) //向下移動 $(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("請選擇要移動的數(shù)據(jù)!"); } }) })
以上這篇Jquery實現(xiàn)select multiple左右添加和刪除功能的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery實現(xiàn)鼠標(biāo)滑過小圖時顯示大圖的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標(biāo)滑過小圖時顯示大圖的方法,涉及圖片及鼠標(biāo)操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12Jquery節(jié)點遍歷next與nextAll方法使用示例
next()方法用于獲取“節(jié)點之后”挨著它的第一個“同類同輩”元素。nextAll()方法用于獲取“節(jié)點之后”所有的元素2014-07-07