弹窗中修改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的部分伪代码如下：

 //拼接通用的select标签

             var  tempStr = "<select name='s' id='s' value='2'>"+

                     "<option value='a'>1a</option>"+

                     "<option value='b'>2a</option>"+

                     "<option value='c'>3a</option>"+

                 "</select>";

             //从对象中取出对应的value

             var  reg = jsonObj[key];

             //如果值存在则替换对应的option个字符串

             if(reg){///如果reg的值是b

                 tempStr = tempStr.replace(reg+"'",reg+" 'selected='selected'")

             }

             //将select标签字符串添加到父dom对象中

             $(#parent).append(tempStr);

其他参考代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>

     <body>

         <div id="d1">

             哈哈

         </div>

         <!--<select name="s" id="s" value="2">

             <option value="1">1a</option>

             <option value="2">2a</option>

             <option value="3">3a</option>

         </select>-->

         <input type="button" name="" id="b" onclick="butClick()" />

     </body>

     <script>

         function butClick(){

             alert(11)

             $("#d1").append("<div id='d2'>嘿嘿    </div>");

             $("#d2").append('<select name="s" id="s" value="2">'+

                 '<option value="a">1a</option>'+

                 '<option value="b">2a</option>'+

                 '<option value="c">3a</option>'+

             '</select>');

             var t = "b";

             $("#s").val(t);//修改select默认选中值（当前显示选中值）

             /*这样就可以动态修改select的默认选项了*/

 /*

  动态添加的标签是可以直接在添加时、或者添加后用js方法改select默认值的。

  但是要注意的是 如果是  弹出框 中的动态拼接出的select，用js修改默认显示选中值时，

  一定要 在弹出窗口的代码执行后再写修改选项的就是，这样修改选中值的js代码在页面上才会生效。

  否则 先写修改选项的js，再执行弹出窗口代码，会造成先写得js代码没有效果。

  */

         }

         $(function(){

             /*下面这样也可以动态修改select的默认选项*/

 //            $('#s').find('option').eq(1).attr("selected","selected")

 //            $("#s").val(3);

             var j=5;

             var obj={};//定义对象

             /*obj.a=1;

             obj.b=2;*/

             obj["a"]=1; //给对象赋值，增加键值对

             obj["b"]=2;    /*如果键是直接的字符串，存入时要加上双引号*/

             obj[j]=7;     /*如果键是变量，可以直接写变量【不带双引号的是变量】*/

 //            alert(obj);

 //            alert(JSON.stringify(obj));

         });

     </script>

 </html>

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

  1. MySQL5.7中的sql_mode默认值

    简介 在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode 默认值的改变 optimizer_switc ...

  2. PostgreSQL中实现更新默认值（二）

    今天我们用表继承+触发器的方案,来实现表中的更新默认值.这也许是PostgreSQL里最佳的解决方案. 一. 创建一张表,作为父表 create table basic_update( t_updat ...

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

    一.SQL修改字段默认值 alter table 表名 drop constraint 约束名字 说明:删除表的字段的原有约束 alter table 表名 add constraint 约束名字 D ...

  4. Sqlserver添加加字段、删除字段、修改字段类型、修改字段名、修改字段默认值

    参考:https://www.cnblogs.com/pangpanghuan/p/6432331.html 初始化表: --.添加字段 --1.1.为null alter table DataTab ...

  5. 在函数中修改全局变量的值，需要加global关键字

    一.引用 使用到的全局变量只是作为引用,不在函数中修改它的值的话,不需要加global关键字.如: #! /usr/bin/python a = 1 b = [2, 3] def func(): if ...

  6. Mysql 修改字段默认值

    环境:MySQL 5.7.13 问题描述:建表的时候,users_info表的role_id字段没有默认值,后期发现注册的时候,需要提供给用户一个默认角色,也就是给role_id字段一个默认值. 当前 ...

  7. struts2视频学习笔记 03-06（Struts 2配置文件无提示问题，Action配置中的各项默认值，各种转发类型）

    课时3 解决Struts 2配置文件无提示问题(eclipse):window→preference→XML→XML Catlog

  8. sqlserver中GUID的默认值设置

    sqlserver中GUID的默认值设置 YID uniqueidentifier not null default (NEWSEQUENTIALID()), //有序GUID(只能用于表设计的时候的 ...

  9. c++ 中bool 的默认值

    比如在Test.h中定义变量: _isFirst; //Test.h头文件 #ifndef __TEST_H__ #define __TEST_H__ class Test{ private: boo ...

随机推荐

  1. package-lock.json的作用

    其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致. 引用知乎@周载南的回答 根据官方文档,这个package-lo ...

  2. C_数据结构_数组的修改和删除

    #include<stdio.h> typedef struct Node { int a,b; }node; node c[]; int n; void print() { int i; ...

  3. cordova打包webapp

    cordova打包webapp 在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包.在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我 ...

  4. D. Little C Loves 3 II

    传送门 [http://codeforces.com/contest/1047/problem/D] 题意 给你n*m得棋盘,让你找两点之间距离为3的点的个数,不能重复使用,距离定义,两坐标差绝对值之 ...

  5. Python学习笔记（一）——初学Python

    1.Python环境配置 本人配置Python2.7及Python3.6版本 将Python3.6环境配置在线,因此默认为Python3.6版本 Python2.7及Python3.6共存 2.简单操 ...

  6. 关于splice()方法，slice() 、split()方法讲解，reverse()方法、replace()方法

    1.slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组 ...

  7. linux系统centOS7下搭建redis集群中ruby版本过低问题的解决方法

    问题描述: 在Centos7中,通过yum安装ruby的版本是2.0.0,但是如果有些应用需要高版本的ruby环境,比如2.2,2.3,2.4... 那就有点麻烦了,譬如:我准备使用redis官方给的 ...

  8. FuelPHP 系列（六） ------ CURD 增删改查

    一.create $article = new Model_Article(); // 或 $article = Model_Article::forge(); // 保存数据,返回新增数据 id $ ...

  9. 解决因为本地代码和远程代码冲突，导致git pull无法拉取远程代码的问题

    一.问题 当本地代码和远程代码有冲突的时候,执行git pull操作的时候,会提示有冲突,然后直接终止本次pull,查了些资料没有找到强制pull的方式,但是可以使用如下方式解决. 二.解决思路 可以 ...

  10. python学习笔记三——控制语句

    2.5 运算符与表达式 2.5.1 算术运算符和算术表达式 算术运算符包括四则运算符.求模运算符和求幂运算符. 算术运算符 加减乘除:+ - * / 表达式:x+y   x-y   x*y  x/y ...