弹窗中修改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的部分伪代码如下:
//拼接通用的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默认值遇到的问题的更多相关文章
- MySQL5.7中的sql_mode默认值
简介 在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode 默认值的改变 optimizer_switc ...
- PostgreSQL中实现更新默认值(二)
今天我们用表继承+触发器的方案,来实现表中的更新默认值.这也许是PostgreSQL里最佳的解决方案. 一. 创建一张表,作为父表 create table basic_update( t_updat ...
- SQL修改字段默认值、获取字段默认值
一.SQL修改字段默认值 alter table 表名 drop constraint 约束名字 说明:删除表的字段的原有约束 alter table 表名 add constraint 约束名字 D ...
- Sqlserver添加加字段、删除字段、修改字段类型、修改字段名、修改字段默认值
参考:https://www.cnblogs.com/pangpanghuan/p/6432331.html 初始化表: --.添加字段 --1.1.为null alter table DataTab ...
- 在函数中修改全局变量的值,需要加global关键字
一.引用 使用到的全局变量只是作为引用,不在函数中修改它的值的话,不需要加global关键字.如: #! /usr/bin/python a = 1 b = [2, 3] def func(): if ...
- Mysql 修改字段默认值
环境:MySQL 5.7.13 问题描述:建表的时候,users_info表的role_id字段没有默认值,后期发现注册的时候,需要提供给用户一个默认角色,也就是给role_id字段一个默认值. 当前 ...
- struts2视频学习笔记 03-06(Struts 2配置文件无提示问题,Action配置中的各项默认值,各种转发类型)
课时3 解决Struts 2配置文件无提示问题(eclipse):window→preference→XML→XML Catlog
- sqlserver中GUID的默认值设置
sqlserver中GUID的默认值设置 YID uniqueidentifier not null default (NEWSEQUENTIALID()), //有序GUID(只能用于表设计的时候的 ...
- c++ 中bool 的默认值
比如在Test.h中定义变量: _isFirst; //Test.h头文件 #ifndef __TEST_H__ #define __TEST_H__ class Test{ private: boo ...
随机推荐
- Redis持久化的两种方式和区别
该文转载自:http://www.cnblogs.com/swyi/p/6093763.html Redis持久化的两种方式和区别 Redis是一种高级key-value数据库.它跟memcached ...
- mysql distinct 去重
在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...
- CentOS7.5下MYSQL8.0.11
MYsql的安装 1. 下载bundles 包 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-1.el7.x86_64.rpm-bun ...
- ntpdate[31915]: the NTP socket is in use, exiting
[root@master local]# ntpdate cn.pool.ntp.org 10 Oct 13:24:36 ntpdate[31915]: the NTP socket is in us ...
- 使用TensorFlow实现分类
这一节使用TF搭建一个简单的神经网络用于分类任务,首先把需要的包引入,另外为了防止在多次运行中一些图中的tensor在内存中影响实验,采取重置操作: import tensorflow as tf i ...
- python 协程库gevent学习--gevent数据结构及实战(四)
一不留神已经到第四部分了,这一部分继续总结数据结构和常用的gevent类,废话不多说继续. 1.Timeout错误类 晚上在调试调用第三方接口的时候,发现有些接口耗时非常多,觉得应该有个超时接口来限制 ...
- MySQL分区管理
以下是我看MySQL官方文档的时候整理的笔记,仅作参考保留. RANGE,LIST分区管理 1:为未分区表创建分区 ; 2:删除某个分区的数据 ALTER TABLE tr DROP PARTITIO ...
- 使用pygal_maps_world.i18n中数据画各大洲地图
源码: # 使用pygal_maps_world.i18n中数据画各大洲地图 from pygal_maps_world.i18n import ASIA from pygal_maps_world ...
- BZOJ3569 DZY Loves Chinese II(随机化+树上差分+线性基)
上一题的强制在线版.对图跑出一个dfs树,给非树边赋上随机权值,树边的权值为覆盖他的非树边权值的异或.这样如果某条树边和覆盖他的非树边都被割掉(即图不连通),他们的异或值就为0.每次对询问看有没有子集 ...
- POJ2492-A Bug's Life-并查集扩展应用
维护一个relation数组,保留着此元素和根元素之间的性别关系.之后就可以判断gay了. #include <cstdio> #include <algorithm> #in ...