<HTML>
<HEAD>
<TITLE></TITLE>
<style text="text/css">
optgroup { background-color:#eee; color:444; }
</style>
</HEAD>
<BODY>
<br>
<select id="sel1" name="sel1">
<option value="">option1</option>
<optgroup label="disable1"></optgroup>
<option value="">option2</option>
<option value="">option3</option>
</select>
<br><br><br>
<INPUT TYPE="button" value="AddElement" οnclick="AddOption();">
<INPUT TYPE="button" value="AddElement2" οnclick="AddOptGroup();">
<INPUT TYPE="button" value="ClearOption" οnclick="ClearOptions();">
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function AddOption()
{
var sel = document.getElementById("sel1");
var opt = document.createElement("option");
opt.innerText = "newopt"; //用insertAdjacentElement时必须设置该属性(设置该属性后不能用options.add添加,报错)
opt.text = "optionX"; //设置这个属性用insertAdjacentElement方法会添加一个空白项,该属性可以不用
opt.value = "X";
sel.insertAdjacentElement("beforeEnd",opt);
//sel.options.add(opt); //用这个方法新加的项放到上一个optgroup下
}
function AddOptGroup()
{
var sel = document.getElementById("sel1");
var optg = document.createElement("optgroup");
optg.label = "disableX";
sel.appendChild(optg);
//sel.add(optg); //必须用appendChild方法,否则相同的optgroup只能添加一个
}
function ClearOptions(obj)
{
var sel = document.getElementById("sel1");
var gl = sel.children.length - 1;
for(var i=gl;i >= 0;i--)
{
sel.removeChild(sel.children(i)); //必须用removeChild方法删除,否则optgroup项删除不掉
}
}
//-->
</SCRIPT>