<!DOCTYPE html> <html> <head> <title>Selectbox Example</title> <script type="text/javascript" src="EventUtil.js"></script> </head> <body> <form method="post" action="javascript:alert('Form submitted!')" id="myForm"> <div> <label for="selLocation">Where do you want to live?</label> <select name="location" id="selLocation" size="5" multiple> <option value="Sunnyvale, CA">Sunnyvale</option> <option value="Los Angeles, CA">Los Angeles</option> <option value="Mountain View, CA">Mountain View</option> <option value="">China</option> <option>Australia</option> </select> </div> <fieldset> <legend>Add a option</legend> <label for="txtText">What should the text be?文本应该是什么?</label> <input type="text" id="txtText" value=""><br> <label for="txtValue">What should the value be?值应该是什么?</label> <input type="text" id="txtValue" value=""><br> <input type="button" value="使用 DOM 添加" id="btnAdd1"> <input type="button" value="使用 Option构造函数 或 add()方法 添加" id="btnAdd2"> </fieldset> <fieldset> <legend>Remove a option</legend> <input type="button" value="使用 DOM 删除" id="btnRemove1"> <input type="button" value="使用 remove()方法 删除" id="btnRemove2"> <input type="button" value="使用 null关键字 删除" id="btnRemove3"> </fieldset> <input type="button" value="获取选中项信息" id="btnSelected"> </form> <script type="text/javascript"> (function(){ function getSelectedOptions(selectbox){ var result = new Array(); var option = null; for (var i=0, len=selectbox.options.length; i < len; i++){ option = selectbox.options[i]; if (option.selected){ result.push(option); } } return result; } var btn1 = document.getElementById("btnAdd1"); var btn2 = document.getElementById("btnAdd2"); var btn3 = document.getElementById("btnSelected"); var btn4 = document.getElementById("btnRemove1"); var btn5 = document.getElementById("btnRemove2"); var btn6 = document.getElementById("btnRemove3");
/*使用DOM添加*/ EventUtil.addHandler(btn1, "click", function(event){ var selectbox = document.getElementById("selLocation"); var textTextbox = document.getElementById("txtText"); var valueTextbox = document.getElementById("txtValue"); var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode(textTextbox.value)); newOption.setAttribute("value", valueTextbox.value); selectbox.appendChild(newOption); }); /*使用DOM添加end*/
/*使用Option构造函数添加,使用add()方法添加*/ EventUtil.addHandler(btn2, "click", function(event){ var selectbox = document.getElementById("selLocation"); var textTextbox = document.getElementById("txtText"); var valueTextbox = document.getElementById("txtValue"); var newOption = new Option(textTextbox.value, valueTextbox.value); selectbox.appendChild(newOption); //selectbox.add(newOption, undefined); }); /*使用Option构造函数添加,使用add()方法添加 end*/
/*获取选中项的值*/ EventUtil.addHandler(btn3, "click", function(event){ var selectbox = document.getElementById("selLocation"); var selectedOptions = getSelectedOptions(selectbox); var message = ""; for (var i=0, len=selectedOptions.length; i < len; i++){ message += "Selected index: " + selectedOptions[i].index +
" Selected text: " + selectedOptions[i].text +
" Selected value: " + selectedOptions[i].value + " "; } console.log(message); }); /*获取选中项的值end*/
/*使用DOM删除*/ EventUtil.addHandler(btn4, "click", function(event){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
var selectbox = document.getElementById("selLocation");
for( var i = 0, len = selectbox.options.length; i < len; i++ ){
if( selectbox.options[i].selected ){
selectbox.removeChild(selectbox.options[i]);
}
}
});
/*使用DOM删除end*/
/*使用remove()方法删除*/ EventUtil.addHandler(btn5, "click", function(event){ event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
var selectbox = document.getElementById("selLocation");
for( var i = 0, len = selectbox.options.length; i < len; i++ ){
if( selectbox.options[i].selected ){
selectbox.remove(selectbox.options[i]);
}
}
});
/*使用remove()方法删除end*/
/*使用 null关键字 删除*/ EventUtil.addHandler(btn6, "click", function(event){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
var selectbox = document.getElementById("selLocation");
for( var i = 0, len = selectbox.options.length; i < len; i++ ){
if( selectbox.options[i].selected ){
selectbox.options[i] = null ;
}
}
});
/*使用 null关键字 删除 end*/
})();
</script>
</body>
</html>