JS实现四级联动

html

 <select name="" id="province"></select>
    <select name="" id="city"> </select>
    <select name="" id="qu"> </select>
    <select name="" id="town"> </select>

JS`

   var province = document.getElementById('province');
        var city = document.getElementById('city');
        var qu = document.getElementById('qu');
        var town = document.getElementById('town');
        var provinceData = area;
        var cityDatz;
        var quData;
        var town;       // 初始化
        creatOpt(province, provinceData)
        // 初始化市  selector.value 返回选中的option的值

        var proVal = province.value;
        cityDatz = provinceData[proVal][0];
        creatOpt(city, cityDatz);
        // 初始化区
        var selectCity = city.value;
        quData = cityDatz[selectCity];

        for (var i = 0; i < quData.length; i++) {
            creatOpt(qu, quData[i]);
        }
        // 初始化镇
        var selectqu = qu.value;
        townData=quData[0][selectqu];
        townArr=townData.replace(/[' ']/g,'').split('、')
        creatOpt(town,townArr)

        province.onchange = function () {

            var opts = province.options;
            var optsIndex = province.options.selectedIndex;
            var optEl = opts[optsIndex];
            var cityIndex = optEl.innerHTML;
            cityDatz = provinceData[cityIndex][0]
            qudata = cityDatz[quIndex][0]
            clear(city);
            creatOpt(city, cityDatz)
            change();
            // townChange();
        }
        city.onchange = change;
        qu.onchange = townChange;
        function creatOpt(sel, obj) {
            if(obj.constructor===Object){
                for (var x in obj) {
                var opt = document.createElement('option');
                opt.innerHTML = x;
                opt.value = x;
                sel.appendChild(opt)
            }
            }else if(obj.constructor==Array){
                for(var j=0;j<townArr.length;j++){
                    var opt = document.createElement('option');
                    opt.innerHTML = obj[j];
                    sel.appendChild(opt);

                }
            }
           
        }
        function clear(sel) {
            var opts = sel.options;
            for (var i = 0; i < opts.length; i++) {
                sel.removeChild(opts[i]);
                i--;
            }
        }
        function change() {
            var cityOpt = city.options[city.options.selectedIndex];
            var quIndex = cityOpt.innerHTML;
            quData = cityDatz[quIndex]

            clear(qu);

            for (var i = 0; i < quData.length; i++) {
                console.log(quData)
                creatOpt(qu, quData[i])
            }
            // townChange();
        }