<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" onclick="AddOption();">
<INPUT TYPE="button" value="AddElement2" onclick="AddOptGroup();">
<INPUT TYPE="button" value="ClearOption" onclick="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>