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>