差点被OptGroup整死

正常的optgroup是这样子的。

 

<select name="select1" id="select1"> <optgroup label="optiongroup1"> <option value="1">option1</option> <option value="2">option2</option> </optgroup> </select>

 

js构造时，使用：

 

var select1 = document.getElementById("select1");

 

var group=document.createElement('OPTGROUP'); 
group.label = "optiongroup1";
select1.appendChild(group);

 

select1.options.add(new Option("option1","1");

select1.options.add(new Option("option2","2");

 

生成的HTML代码为：

<select name="select1" id="select1">

<optgroup label="optiongroup1"></optgroup>

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

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

</select>

 

倒也不影响显示，关键是safari下，optgroup标签不显示了，

整了我好久，最后发现，optgroup闭紧了，只要结束标签前有个什么都能显示。即：

<optgroup label="optiongroup1"><!--这里随便有个字符--></optgroup>

 

于是我构造时插入空格：

var group=document.createElement('OPTGROUP'); 
group.label = "optiongroup1";

group.innerText= " ";

select1.appendChild(group);

 

这样子竟然OK了，搞不懂。

终于支持IE，Firefox, opera, safari, chrome了。