轉自:位址忘記了
<HTML>
<HEAD>
<TITLE>listbox and combobox</TITLE>
</HEAD>
<script language="javascript">
function visitOption(){
var oSelCode=document.getElementById("selColor");
var i;
for(i=0;i<oSelCode.options.length;i++){
alert(oSelCode.options[i].firstChild.nodeValue);//重點方法
alert(oSelCode.options[i].getAttribute("value"));//重點方法
//alert(oSelCode.options[i].index);
//alert(oSelCode.options[i].text);
//alert(oSelCode.options[i].value);
}
}
function visitSelected(){
var oSelCode=document.getElementById("selColor");
alert(oSelCode.selectedIndex);
alert(oSelCode.options[oSelCode.selectedIndex].index);
alert(oSelCode.options[oSelCode.selectedIndex].text);
alert(oSelCode.options[oSelCode.selectedIndex].value);
}
function visitAllSelected(){
var oSelCode=document.getElementById("selColor");
var i;
for(i=0;i<oSelCode.options.length;i++){
//alert(oSelCode.selectedIndex)
if(oSelCode.options[i].selected){
alert(oSelCode.options[i].index);
alert(oSelCode.options[i].text);
alert(oSelCode.options[i].value);
}
}
}
function changeSelected(){
var oSelCode=document.getElementById("selColor");
oSelCode.selectedIndex=oSelCode.options.length-1;//移動到最後一項
}
function addOption(){
var oSelCode=document.getElementById("selColor");
var oOption=document.createElement("option");
oOption.setAttribute("value","yellow");
var oText=document.createTextNode("黃色");
oOption.appendChild(oText);
oSelCode.appendChild(oOption);
//oOption.document.createElement("黃色");//錯誤
//oOption.document.createTextNode("yellow");//錯誤
//oSelCode.appendChild(oOption);
}
function delOption(){
var oSelCode=document.getElementById("selColor");
var oOption=oSelCode.options[oSelCode.selectedIndex];
oSelCode.removeChild(oOption);
}
function delAllOption(){
var oSelCode=document.getElementById("selColor");
var i;
for(i=oSelCode.options.length-1;i>=0;i--){
var oOption=oSelCode.options[i];
oSelCode.removeChild(oOption);
}
}
</script>
<BODY>
<form>
選擇喜歡的顔色:<select id="selColor" name="selColor" multiple="true"><!-- 加size="3"為清單框 -->
<option value="red">紅色</option>
<option value="green" selected>綠色</option>
<option value="blue">藍色</option>
</select><br>
<input type="button" value="周遊組合框" οnclick="visitOption();"><br>
<input type="button" value="擷取選中項" οnclick="visitSelected();"><br>
<input type="button" value="擷取所有選中項" οnclick="visitAllSelected();"><br>
<input type="button" value="更改選中項" οnclick="changeSelected();"><br>
<input type="button" value="添加選項" οnclick="addOption();"><br>
<input type="button" value="删除選項" οnclick="delOption();"><br>
<input type="button" value="删除所有選項" οnclick="delAllOption();"><br>
</form>
</BODY>
</HTML>