弹窗中修改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>
时间: 2024-08-05 08:38:27

弹窗中修改select默认值遇到的问题的相关文章

PostgreSQL中实现更新默认值(二)

今天我们用表继承+触发器的方案,来实现表中的更新默认值.这也许是PostgreSQL里最佳的解决方案. 一. 创建一张表,作为父表 create table basic_update( t_update timestamp); 二. 创建一个函数,用作最后负责修改t_update使用 CREATE OR REPLACE FUNCTION update_modified_column() RETURNS TRIGGER AS $$BEGIN NEW.t_update = now(); RETURN

SQL修改字段默认值

一.SQL修改字段默认值 alter table 表名 drop constraint 约束名字 说明:删除表的字段的原有约束 alter table 表名 add constraint 约束名字 DEFAULT 默认值 for 字段名称 说明:添加一个表的字段的约束并指定默认值 go 例: alter table T_ping drop constraint DF_T_ping_p_c alter table T_ping add constraint DF_T_ping_p_c DEFAUL

Swift——(五)Swift中的那些默认值

在Swift语言中,有很多默认值,这里将常用的总结,欢迎补充. @Author: twlkyao 1.函数(方法)形参 在函数(方法)中,形参默认是常量,这主要是为了防止误操作,在调用函数(方法)时改变了实参的值,所以使用常量,如果想在函数内部对实参进行修改,可以使用var关键字进行标识,但是这并没有结束,如果想在函数(方法)调用结束之后仍然可以使用修改后的值,需要使用inout关键字进行标识,同时不要使用var对形参进行标识,在调用函数(方法)的时候,传递的实参,需要使用"&"

SQL修改字段默认值、获取字段默认值

一.SQL修改字段默认值 alter table 表名 drop constraint 约束名字 说明:删除表的字段的原有约束 alter table 表名 add constraint 约束名字 DEFAULT 默认值 for 字段名称 说明:添加一个表的字段的约束并指定默认值 go 例: alter table T_ping drop constraint DF_T_ping_p_c alter table T_ping add constraint DF_T_ping_p_c DEFAUL

Action 名称搜索顺序&amp;Action配置中的各项默认值

Action 名称的搜索顺序  一级一级往上,若命名空间包存在,但Action不存在,则跑到默认命名空间. Action 配置中的各项默认值    默认类class:ActionSupport    默认方法method:action的 execute    默认result name :success

【Struts2学习笔记(2)】Action配置中的各项默认值和Action中result的各种转发类型

一.Action配置中的各项默认值 <span style="font-size:18px;"><package name="itcast" namespace="/test" extends="struts-default"> <action name="helloworld" class="cn.itcast.action.HelloWorldAction&quo

WAMP中修改mysql默认空密码

WAMP中如何修改mysql默认空密码 WAMP安装好后,mysql教程密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作.首先,通过WAMP打开mysql控制台.提示输入密码,因为现在是空,所以直接按回车.然后输入 use mysql 意思是使用mysql这个数据库教程,提示"Database changed"就行.然后输入要修改的密码的sql语句 update user set password=PASSWORD('root') where use

vue中$event理解和框架中在包含默认值外传参

vue中$event理解和框架中在包含默认值外传参:https://blog.csdn.net/qq_43702430/article/details/90692242?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1 原文地址:https://

sql的基本用法-------修改字段默认值和属性

修改表中已有的字段属性 ALTER TABLE 表名 ALTER COLUMN 字段名 varchar(500) --sqlserver建表表时设置字段的默认值 create table 表(id int,name varchar(10) default '张三',age int) --添加字段时设置字段的默认值 alter table 表 add sex char(2) default '男' --为表中现有的字段设置默认值 alter table 表 add constraint DF_ag