es6 简单封装一个 省市县三级下拉框

Posted 2021-02-02 ken丶123

　　　废话不多说，直接上效果图和代码：

　　　　　　　　

 

　　1，index.js

　　　　

function $(el){
    return document.getElementById(el)
}

let render = Symbol(\'render\')
let event = Symbol(\'event\')

class Select {
    constructor (el) {
        console.log(el)
        if (!el) {
            throw \'请填写el配置\'
        } else {
            this[render](el)
            this[event]()
        }
    }

    [render](el) {
        let tpl = `<div class="select-box disIn font14">
        <div class="province-box disIn pr">
            <input type="text" name="province" class="province-input" id="province-input" placeholder="请选择省" readonly>
            <ul class="province-list" id="province-list"></ul>
        </div>
        <div class="city-box disIn pr">
            <input type="text" name="city" class="city-input" id="city-input" placeholder="请选择市" readonly>
            <ul class="city-list" id="city-list"></ul>
        </div>
        <div class="area-box disIn pr">
            <input type="text" name="area" class="area-input" id="area-input" placeholder="请选择县" readonly>
            <ul class="area-list" id="area-list"></ul>
        </div>
    </div>`;
        el.innerhtml = tpl;
    }

    async [event]() {
        let datas = await fetchJson(\'/region\')          // 这里用了mock 模拟了一个get请求，获取了一个全国省市县的json数据。
        let $provinceInput = $(\'province-input\')
        let $provinceList = $(\'province-list\')
        let $cityInput = $(\'city-input\')
        let $cityList = $(\'city-list\')
        let $areaInput = $(\'area-input\')
        let $areaList = $(\'area-list\')
        let provinceData = \'\';
        let cityData = \'\';
        let areaData = \'\';
        let choicedData = null;
        $provinceInput.onclick = function () {
            provinceData = \'\';
            for (let province of datas.data) {
                provinceData += `<li data-code="${province.code}">${province.name}</li>`
            }
            $provinceList.innerHTML = provinceData
            $provinceList.style.display = \'block\'
            $provinceList.onclick = function (e) {
                $provinceInput.value = e.target.innerHTML
                $provinceInput.setAttribute(\'data-code\', e.target.getAttribute(\'data-code\'))
                $cityInput.value = $areaInput.value = \'\';
                this.style.display = \'none\';
            }
        }
        $cityInput.onclick = function () {
            cityData = \'\';
            let provinceCode = $provinceInput.getAttribute(\'data-code\')
            if (!provinceCode) {
                $provinceInput.click()
                return
            }
            choicedData = datas.data.filter(item => {
                return item.code === provinceCode
            })
            for (let item of choicedData[0].cityList) {
                cityData += `<li data-code="${item.code}">${item.name}</li>`
            }
            $cityList.innerHTML = cityData
            $cityList.style.display = \'block\';
            $cityList.onclick = function (e) {
                $cityInput.value = e.target.innerHTML
                $cityInput.setAttribute(\'data-code\', e.target.getAttribute(\'data-code\'))
                this.style.display = \'none\'
            }
        }

        $areaInput.onclick = function () {
            areaData = \'\';
            let cityCode = $cityInput.getAttribute(\'data-code\');
            if (!cityCode) {
                $cityInput.click()
                return
            }
            let cityChoiced = choicedData[0].cityList.filter(item => {
                return item.code === cityCode
            })
            for (let item of cityChoiced[0].areaList) {
                areaData += `<li data-code="${item.code}">${item.name}</li>`
            }
            $areaList.innerHTML = areaData;
            $areaList.style.display = \'block\'
            $areaList.onclick = function (e) {
                $areaInput.value = e.target.innerHTML
                $areaInput.setAttribute(\'data-code\', e.target.getAttribute(\'data-code\'))
                this.style.display = \'none\'
            }
        }
    }
}