select标签的onchange事件

时间:2022-06-10 04:03:11

/*
* @1.onchange事件 ==> select选择事件
* @2.obj.options ==> 选择option集合
* @3.obj.selectedIndex ==> 选择的下标
*/

/*
* @bug
* @1.onchange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的!
* @2.连续选相同一项时, 不触发onchange事件
* @3.创建option必须使用 new Option()
* @ add()方法附加到select中第二个参数要设置为undefined兼容
*/

// select单个选择
chooseProvince();
function chooseProvince(){
var obj = document.getElementById("province");
var sele = obj.options;
obj.onchange = function(){
var index = obj.selectedIndex;
if(index > 0){
console.log(sele[index].value);
}
}
}
// 城市选择
var datas = [["--选择城市--"],
["北京1", "北京2", "北京3"],
["天津1", "天津2", "天津3"],
["上海1", "上海2", "上海3"]
];
chooseProvince()
function chooseProvince(){
var province = document.getElementById("province");
var citySel = document.getElementById("city");
province.onchange = function(){
var index = province.options.selectedIndex;
citySel.innerHTML = '';
if(index > 0){
citySel.style.display = "block";
citySel.options.add(new Option(datas[0][0], undefined));
var citys = datas[index];
for(var i = 0; i < citys.length; i++){
citySel.options.add(new Option(citys[i], undefined));
}
}else{
citySel.style.display = "none";
}
} citySel.onchange = function(){
if(citySel.selectedIndex > 0){
console.log("你选择了:" + citySel.options[citySel.selectedIndex].value);
}
}
}
<div id="select_box">
<select id="province">
<option selected="selected">--选择省市--</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select id="city"></select>
</div>