<!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 +
"\nSelected text: " + selectedOptions[i].text +
"\nSelected value: " + selectedOptions[i].value + "\n\n";
}
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>
