1.单项选择框——用事件选择选项并获取选中项信息
<!DOCTYPE html> <html> <head> <title>单项选择框——用事件选择选项并获取选中项信息</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"> <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> <div> <input type="button" value="选择第一项" id="btnFirst" /> <input type="button" value="选择第二项" id="btnSecond" /> <input type="button" value="获取选中项信息" id="btnSelected" /> </div> </form> <script type="text/javascript"> (function(){ var btn1 = document.getElementById("btnFirst"), btn2 = document.getElementById("btnSecond"), btn3 = document.getElementById("btnSelected"), selectbox = document.getElementById("selLocation"); EventUtil.addHandler(btn1, "click", function(event){ selectbox.selectedIndex = 0;
/*selectbox.options[0].selected = true;*/ }); EventUtil.addHandler(btn2, "click", function(event){ selectbox.selectedIndex = 1;
/*selectbox.options[1].selected = true;*/
});
EventUtil.addHandler(btn3, "click", function(event){
var selIndex = selectbox.selectedIndex;
var selOption = selectbox.options[selIndex];
alert("Selected index: " + selectbox.selectedIndex +
" Selected text: " + selOption.text +
" Selected value: " + selOption.value);
});
})();
</script>
</body>
</html>
2.多项选择框——用事件获取选中项信息
<!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>
<div>
<input type="button" value="Select first option" id="btnFirst">
<input type="button" value="Select second option" id="btnSecond">
<input type="button" value="Get selected options" id="btnSelected">
</div>
</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("btnFirst");
var btn2 = document.getElementById("btnSecond");
var btn3 = document.getElementById("btnSelected");
var selectbox = document.getElementById("selLocation");
/*在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。
但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。*/ EventUtil.addHandler(btn1, "click", function(event){ selectbox.options[0].selected = true; });
EventUtil.addHandler(btn2, "click", function(event){ selectbox.options[1].selected = true; });
EventUtil.addHandler(btn3, "click", function(event){ 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); }); })(); </script> </body> </html>
/*在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。*/