弹窗中修改select默认值遇到的问题
Posted 戈博小刀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹窗中修改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：为了避免方法1的局限性，我用了方法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默认值遇到的问题的主要内容，如果未能解决你的问题，请参考以下文章
elementUI的Message Box弹窗中添加图片并显示
微信小程序安卓固定弹窗中textarea的placeholder会被弹出去