JavaScript之Select和Option对象
select对象|option对象
length 长度
selectedIndex 获取选中项的索引(下标)
options 返回一个数组(所有的option项)
options[3] 获取指定下标的option对象
obj.options[index].value; 获取选中项options的value
obj.options[index].text; 获取选中项options的text
obj.add(new Option("文本" ,"值" ));
利用Option对象来创建option标签
var option = new Option("初中","初中");
<select id="degree">
<option value="0">--请选择学历--</option>
<option value="gaozhong">高中</option>
<option value="dazhuan">大专</option>
<option value="benke">本科</option>
<option value="yanjiusheng">研究生</option>
<option value="boshi">博士</option>
</select>
<input type="button" value="获取下拉列表信息" id="btnGet">
<input type="button" value="添加选项" id="btnAdd">
<input type="button" value="清空下拉列表" id="btnClear">
<input type="button" value="选中本科" id="btnSelect">
<!-- js区域 -->
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
// 获取下拉列表信息
$("btnGet").onclick = function() {
// alert(123);
// 获取select标签下的option标签的个数
console.log($("degree").length);
// 获取被选中的option的索引(下标)
console.log($("degree").selectedIndex);
// 设置选中的option
$("degree").selectedIndex = 3;
// 获取option数组
console.log($("degree").options);
// 获取指定元素对象
console.log($("degree").options[2]);
$("degree").selectedIndex = 3;
console.log($("degree").options[$("degree").selectedIndex]);
// 获取value值
console.log($("degree").options[2].value);
// 获取文本内容
console.log($("degree").options[2].innerHTML);
console.log($("degree").options[2].text);
// 创建一个option标签 createElement+appchild
var option=new Option('1','2');
console.log(typeof(option));
}
$('btnSelect').onclick=function(){
$('degrss').selectedIndex=i;
break;
}
}
}
<h3>3.二级联动[版本2]</h3>
省:<select id="province" name="province">
<option selected="selected" value="all">全部</option>
</select>
市:
<select id="city" name="city">
<option selected="selected" value="all">全部</option>
</select>
<script type="text/javascript">
// console.log(typeof(citydata));
for(var pro in citydata){
$("province").add(new Option(pro,pro))
}
var stu = {"name":"张三","sex":"男"};
// 设置$("province") 改变事件
$("province").onchange = function(){
// 清空第二个下拉框中的所有选项
$("city").length = 0;
$("city").add(new Option("请选择","请选择"));
// 获取所有的省份(遍历) 获取选中的省份
for(var pro in citydata){
if(pro === this.value){
// console.log(pro);
// console.log(typeof(citydata[pro]));
console.log(citydata[pro]);
// break;
// 遍历得到点击省份的所有城市
for(var ct in citydata[pro]){
// console.log(citydata[pro][ct]);
$("city").add(new Option(citydata[pro][ct],citydata[pro][ct]));
}
}
}
};
</script>