jQuery 兩個select之間option的互相新增操作
阿新 • • 發佈：2019-01-08
效果圖
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>SelectIndex</title> <script src="~/jquery/jquery.min.js"></script> <style> .mydiv {width: 550px;} </style> <script> $(document).ready(function () { var w = $(window).width(); var h = $(window).height(); //alert("顯示器長度：" + w + " 顯示器長度/2：" + w / 2); //alert("顯示器寬度：" + h + " 顯示器寬度/2：" + h / 2); $(window).resize(); //初始化列表資料 for (var i = 1; i <= 5; i++) { $("#fb_list").append("<option value='" + i + "'>公開招標小型機採購00" + i + "</option>"); } //向右側列表新增資料 $("#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("請選擇要新增的分包！"); } }) //將左側的資料全部新增到右側，並清空左側資料 $("#addList").click(function () { if ($("#fb_list option").length > 0) { $("#fb_list option").each(function () { $("#select_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }) } else { alert("請選擇要新增的分包！"); } }) //雙擊左側列表一條資料，新增到右側列表 $('#fb_list').dblclick(function () { $("#fb_list option:selected").each(function () { $("#select_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }) }); //刪除右側列表選擇的資料 $("#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("請選擇要刪除的分包！"); } }) //將右側的資料全部新增到左側，並清空右側資料 $("#deleteList").click(function () { if ($("#select_list option").length > 0) { $("#select_list option").each(function () { $("#fb_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }) } else { alert("請選擇要刪除的分包！"); } }) //雙擊又側列表一條資料，新增到左側列表 $('#select_list').dblclick(function () { $("#select_list option:selected").each(function () { $("#fb_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option"); $(this).remove(); }) }); }) //提交按扭獲取左右的options所有值傳給後臺處理 function sel() { var obj = document.getElementById('fb_list'); var str = ""; for (var i = 0; i < obj.options.length; i++) { if (str.length > 0) str = str + "," + obj.options[i].value; else str = obj.options[i].value; } alert(str); } //獲取顯示器長寬，div定位 $(window).resize(function () { $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").outerWidth()) / 2, top: ($(window).height() - $(".mydiv").outerHeight()) / 3 }); }); </script> </head> <body> <div class="mydiv"> <form name="form1" method="post" id="form1"> <table style="width:395px;margin:10px 0;" align="center" class="tblresult"> <tr> <th colspan="3" style="font-size:14px;text-align: center">新增人員</th> </tr> <tr> <td> <table class="noborder"> <tr> <th>已有人員</th> </tr> <tr> <td> <select id="fb_list" name="seled" multiple="true" style="width:160px;height:200px;"> <option value="1">張三</option> </select> </td> </tr> </table> </td> <td> <table class="noborder"> <tr> <td> <input id="add" type="button" value=">>" style="width:30px;" /> </td> </tr> <tr> <td> <input id="addList" type="button" value=">>>>" style="width:40px;" /> </td> </tr> <tr> <td> <input id="delete" type="button" value="<<" style="width:30px;" /> </td> </tr> <tr> <td> <input id="deleteList" type="button" value="<<<<" style="width:40px;" /> </td> </tr> </table> </td> <td> <table class="noborder"> <tr> <th>備用人員</th> </tr> <tr> <td> <select id="select_list" name="unseled" multiple="true" style="width:160px;height:200px;"> <option value="4">李四</option> <option value="5">王五</option> </select> </td> </tr> </table> </td> </tr> <tr> <td colspan="3" style="text-align:center;height:35px;"> <input type="button" value="儲存" class="btn1" onclick="sel();" /> <input type="button" value="取消" onclick="javascript:doClose();" class="btn1" /> </td> </tr> </table> </form> </div> </body> </html>