选择框脚本_用事件选中选项，获取选中项信息 P432
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 +
"\nSelected text: " + selOption.text +
"\nSelected value: " + selOption.value);
});
})();
script>
body>
html>
2.多项选择框——用事件获取选中项信息
DOCTYPE html>
<html>
<head>
<title>Selectbox Exampletitle>
<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 +
"\nSelected text: " + selectedOptions[i].text +
"\nSelected value: " + selectedOptions[i].value + "\n\n";
}
console.log(message);
});
})();
script>
body>
html>
/*在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。*/