灵活处理select/option对象中的特殊字符

现在，已经习惯用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中将特殊字符都转换成了&amp;&gt,&lt等。

 

有没有一种折衷的方案，在任意情况下，都能在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的时候要使用这种保险的方式。