select标签的onchange事件

/*
* @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>