項目要實現這樣的一個功能(如下圖所示):選擇左邊下拉列表框中的選項,點擊添加按鈕,把選擇的選項移動到右邊的下拉列表框中,同樣的選擇右邊的選項,點擊刪除按鈕,即把選擇的選項移動到左邊的下拉列表框中.相信用js很多朋友都寫過,下面是我用jQuery來實現這樣的功能的。
具體代碼如下：
<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("請選擇要移動的數據!"); } })})//向下移動$(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("請選擇要移動的數據!"); } })})以上這篇Jquery實現select multiple左右添加和刪除功能的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
