彈窗中修改select默認值遇到的問題
彈窗中修改select默認值無效
前提：
項目中遇到一個需求，
在一個彈窗中，有很多個select都是在打開彈窗的同時由js自動生成的（每次打開都自動重新生成一遍）。
彈窗打開後，從每個select的下拉選中選中一個值。然後彈窗下面有個確定按鈕。
點確定 按鈕，將每個select選中的值保存起來。
下次再次打開彈窗時，每個自動生成的select中都默認值顯示上次選中的值。
我的思路是：
1、在每次點 確定 按鈕 時：
新建一個 js 對象jsonObj，每次點 確定後把 每個select的id（也可以是其他標記）和此次的選中值，
以模擬鍵值對的形式存入到 對象中。
然後把jsonObj對象轉為json串 JSON.stringify(jsonObj),存入到頁面上的一個 input隱藏域中。
2、第二次再打開 彈窗時，
先從隱藏域中取出jsonStr對象字符串，轉成json對象 jsonObj = JSON.parse(jsonStr)
生成通用的select標簽及option，
從jsonObj對象中根據key即每個要修改的select標簽的id，取出對應的默認選中值 value。
3、修改每個新生成的select的默認選中值為對應的value。
遇到的問題
在第3步中，每次我用 設置val()或者給option添加selected=selected的方法，在頁面上顯示時都無效，
都是默認顯示第一個。
經過同事的指導，發現最終問題的原因是，項目中用的公司封裝的 dragBoxShow（彈窗dom的id）的打開彈窗方法，
只有在彈窗打開後，所有的select和option都展示在頁面上後，再用js來修改select的默認選中值才有效。
也就是，修改select默認值的js代碼必須要在打開彈窗代碼後執行才有效，否則總是選第一個。
產生此問題的具體原因我不清楚。
解決方法：
方法1：將修改默認select選項的代碼放在彈窗顯示代碼後執行。
【此方法有個問題，就是如果邏輯復雜，有時並不能這樣做。也就是 業務邏輯必須要求最後顯示彈窗】
方法2
不是在select和option生成dom標簽後用js修改。
而是在生成dom前的的 字符串拼接階段就將默認值設置好，通過給option加上selected屬性。
拼接好後，再加入父dom中。【用這種方法就可以不用先顯示彈窗，再用js修改默認值了】
方法2的部分偽代碼如下：
1 //拼接通用的select標簽 2 var tempStr = "<select name=‘s‘ id=‘s‘ value=‘2‘>"+ 3 "<option value=‘a‘>1a</option>"+ 4"<option value=‘b‘>2a</option>"+ 5 "<option value=‘c‘>3a</option>"+ 6 "</select>"; 7 8 //從對象中取出對應的value 9 var reg = jsonObj[key]; 10 11 //如果值存在則替換對應的option個字符串 12 if(reg){///如果reg的值是b 13 tempStr = tempStr.replace(reg+"‘",reg+" ‘selected=‘selected‘") 14 } 15 16 //將select標簽字符串添加到父dom對象中 17 $(#parent).append(tempStr);
其他參考代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 8 <body> 9 <div id="d1"> 10 哈哈 11 </div> 12 <!--<select name="s" id="s" value="2"> 13 <option value="1">1a</option> 14 <option value="2">2a</option> 15 <option value="3">3a</option> 16 </select>--> 17 <input type="button" name="" id="b" onclick="butClick()" /> 18 </body> 19 <script> 20 21 function butClick(){ 22 alert(11) 23 $("#d1").append("<div id=‘d2‘>嘿嘿 </div>"); 24 25 $("#d2").append(‘<select name="s" id="s" value="2">‘+ 26 ‘<option value="a">1a</option>‘+ 27 ‘<option value="b">2a</option>‘+ 28 ‘<option value="c">3a</option>‘+ 29 ‘</select>‘); 30 31 var t = "b"; 32 $("#s").val(t);//修改select默認選中值（當前顯示選中值） 33 /*這樣就可以動態修改select的默認選項了*/ 34 35 /* 36 動態添加的標簽是可以直接在添加時、或者添加後用js方法改select默認值的。 37 但是要註意的是 如果是 彈出框 中的動態拼接出的select，用js修改默認顯示選中值時， 38 一定要 在彈出窗口的代碼執行後再寫修改選項的就是，這樣修改選中值的js代碼在頁面上才會生效。 39 否則 先寫修改選項的js，再執行彈出窗口代碼，會造成先寫得js代碼沒有效果。 40 */ 41 } 42 43 $(function(){ 44 /*下面這樣也可以動態修改select的默認選項*/ 45 // $(‘#s‘).find(‘option‘).eq(1).attr("selected","selected") 46 // $("#s").val(3); 47 var j=5; 48 var obj={};//定義對象 49 /*obj.a=1; 50 obj.b=2;*/ 51 obj["a"]=1; //給對象賦值，增加鍵值對 52 obj["b"]=2; /*如果鍵是直接的字符串，存入時要加上雙引號*/ 53 obj[j]=7; /*如果鍵是變量，可以直接寫變量【不帶雙引號的是變量】*/ 54 // alert(obj); 55 // alert(JSON.stringify(obj)); 56 }); 57 58 </script> 59 </html>
彈窗中修改select默認值遇到的問題