现在,已经习惯用js去构造网页上的组件,对于普通的下拉框,我们习惯用以下js来构造成页面组件:
var select = document.createElement("select");
var option = document.createElement("option");
option.innerHTML = "Option Text";
option.value = "Value";
select.appendChild(option);
这里不能用option.text = "Option Text"来给option定义显示文本,原因很简单:IE在这种情况下不支持这样的属性赋值,必须使用innerHTML来替换,否则,option的text值在IE下无法正常显示在页面组件上。
如此这般,代码在IE和Firefox下都可以顺利的运行,一切都很正常。但是,潜在的问题也因此产生。
如果我们要设定的text中如果含有特殊字符,如常见的&,<,>等,直接赋到innerHTML中,在IE下所显示出来的text就是空的了。但是,在Firefox下似乎一切都比较正常,但翻译出来的innerHTML中将特殊字符都转换成了&>,<等。
有没有一种折衷的方案,在任意情况下,都能在IE和Firefox下按原文显示或获取一个下拉框的值或文本呢?
查阅资料后,终于找到一种方案,这里引入了一个比较过时的Syntax可以提供给大家参考:
new Option([text[, value[, defaultSelected[, selected]]]]);
不错,这就意味着我们必须用这种new对象的方式来创建option,而不是document.createElement。示例代码如下:
var select = document.createElement("select");
var option = new Option(“Option Text”, “Value”);
select.options[0] = option;
测试在IE和Firefox下均可以用text和value取得原始文本值。这里不提倡用innerHTML来取值,Firefox会将这个innerHTML的内容转译一下,因此也就失去了我们的本意。
所以,对于一个熟练有经验的js程序员,在创建一个select组件的时候,千万记得动态创建自己的option的时候要使用这种保险的方式。
分享到:
相关推荐
IE6/7/8中Option元素未设value时Select将获取空字符串</title> </head> <body> <select onchange=”alert(this.value)”> <option>one</option> <option>two</option> <option>...
一、AngularJs中select绑定ng-model数字类型绑定问题 使用ng-model绑定select的时候默认是string字符串,如果指定的number值会绑定失败 举例说明: <body ng-app='module' ng-controller=myCtrl> 请选择性别...
function loadXMLByString(xmlString)针对两种浏览器,分别由字符串获取xmlDocument对象 function ImportXML(xmlDoc,alertString)导入XML模板文件 function ExportFile()导出模板,并命名模板 function ...
一、select相关知识 <select> <option value=0>HTML</option> <option value=1>Java</option> <option value=2>Python</option> </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些...
下面小编就为大家带来一篇jQuery获取select选中的option的value值实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果。 <div class=ui-select> 使用加息券或现金券 <i class=icon-down></i></span> <select name= id=&...
比较字符数: 前者336,后者112。 第二个例子,现在让我们想像你正在用HTML写一个数据输入窗口, 你想要一个下拉输入框。下拉框中有三 个选项。代码如下: HTML <select name="type"> <option value="1">...
相信大家都用过下拉菜单,而用select控件来实现是最常用也是最简单的方法
jQuery获取Select选择的Text和Value: 代码如下: var checkText=jQuery(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text var checkValue=jQuery(“#select_id”).val(); //获取Select选择...
②如果想向后台传送数据,需要在select标签中写上name属性,每个option标签中写上value属性 (3)文本域textarea 每行显示字符数" rows="行数"> 文本内容 </textarea> </form>
<select id="sel_subclass" style="display:none" name="sel_subclass"><option value="" selected="selected">请选择</option> </select> </td> </tr> 资源分:</th> <select name="sel...
<option value=””>请选择</option> <option value=”1″>安徽省</option> …… </select> 第二种情况: 代码如下: <select id=”ddlType”></select> 或者 <asp:DropDownList ID
form的序列化,即将表单中的键值序列化为可提交的字符串 表单 <form id=target> <select name=age> <option value=age1>20</option> <option value=age2>21</option> </select> <input...
例:将test表中的Count列宽度加长为10个字符 sql>alter atble test modify (County char(10)); b、将一张表删除语句的格式如下: DORP TABLE 表名; 例:表删除将同时删除表的数据和表的定义 sql>drop table ...
<br/>7.22 EXPLAIN (解释)句法(得到关于SELECT的信息) <br/>7.23 DESCRIBE (描述)句法(得到列的信息) <br/>7.24 LOCK TABLES/UNLOCK TABLES (锁定表/解锁表)句法 <br/>7.25 SET OPTION (设置选项)句法 <br/>7.26 ...
<option>学生</option><option>一年</option><option>二年</option><option>三年</option><option>三年到五年</option><option>五年到十年</option><option>十年以上</option> </select> </div> ...
’字符串,在遍历虚拟机列表时把他的策略值拼成 ‘value=”1″‘ 这样的字符串,再利用explode()和implode() 函数,组成新的字符串返回给前台,就实现了选中状态。 $option = '<select class="sla_list">'; ...
前言: 这是一个老bug了,现在提供... bug描述: 在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错,不是没有插进去,而是节点在转换时出问题了,微软对