Forward：
Jian 最近在做畢業設計
其中一個前台頁面操作是點選某個 select 中 option 後可以添加到另一個 select 中
點選第二個 select 又可以將選中的 option 移除
Code：
不說其它了，還是直接貼代碼吧
當然，得首先確保有正確的 js
<!-- author==>> Jian --><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /><title>JQuery操作select</title><br /><script type="text/javascript" src="jquery-1.4.min.js"></script><br /><script language="javascript"><br />// select 中的 onchange()事件<br />function selectChange() {<br />$("#addBT").attr("disabled",false); // 首先將添加按鈕設為可用<br />var selectObject = $("#myselect").val(); // 取得左側所選取的值<br />$("#myresult").find("option").each(function(){ // 以 option 為參數 查詢 右側所有的可選項並逐一遍曆<br />if($(this).val() == selectObject){ // 判斷左側中選擇的項在右側中是否已經存在<br />//alert("I got you!");<br />$("#addBT").attr("disabled",true); // 如果上面的判斷存在則將添加按鈕設為不可用, 禁止重複添加<br />}<br />});<br />}</p><p>// 左側增加到右側<br />function toAdd() {</p><p>var selectObject = $("#myselect").val(); // 取得左側所選取的值<br />if (null==selectObject) {<br />alert("【Jian's tips】您未選擇任何可以添加的內容!");<br />return;<br />}<br />var content = "<option value='"+selectObject+"'>"+selectObject+"</option>"; // 填充右側的值<br />$("#myresult").append(content);<br />selectChange(); // 最後調用 selectChange()類比onChange()事件, 主要是為了能夠及時地將禁用的添加按鈕重新啟用(如果有必要)</p><p>}</p><p>// 右側移除<br />function toRemove() {<br />var removeObject = $("#myresult option:selected").val(); // 取得右側要移除的內容, 注意可多選<br />if (null==removeObject) {<br />alert("【Jian's tips】您未選擇任何要刪除的內容!");<br />return;<br />}<br />$("#myresult option:selected").remove();<br />selectChange(); // 與toAdd()中調用原理一致<br />}</p><p></script><br /></head></p><p><body><br /><p style="color:#F60; size:auto">author: Jian</p><br /><select style="width:100px" id="myselect" size="5" onchange="selectChange()"><br /> <option value="曹操">曹操</option><br /> <option value="劉備">劉備</option><br /> <option value="孫權">孫權</option><br /></select><br /><input id="addBT" name="addBT" type="button" value="添加" onclick="toAdd()"/><br /><input id="rmBT" name="rmBT" type="button" value="移除" onclick="toRemove()"/><br /><select style="width:100px" size="5" multiple="MULTIPLE" id="myresult"><br /></select><br /></body><br />
Conclusion：
這裡說明下，因為 Jian 的需求是：左側的值是資料庫中儲存的，而且是對應不同分類有不同值，所以設計成為按鈕禁用與啟用的形式
有的 Demo 實現的效果是將左側資料點擊增加後，左側中會移除，右側添加
而右側移除後，又會將資料還原為左側
雖然 Jian 沒有寫這個效果，但是如果是待用資料的話應該不難
by the way， 填充資料時，option 的 value 與 text 屬性可以自由設定，就不多說了
Confusion：
還是那個問題，如果是從資料庫動態資料，如何? 左側添加-->消失-->右側移除-->還原 的效果
特別是，當左側的 select 也是動態產生的，而且不止一個，那...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
