原生JS方法写三级联动

来源：互联网发布：mac怎么关闭打开的程序编辑：程序博客网时间：2024/06/06 11:02

最近在练习项目时，遇到了三级联动问题，于是就在本地用JS做了一个三级联动，如有写的不对的地方，请大佬们指正出来~

1、搞清楚<select></select>标签的一些选择框脚本。

1.当选中某个option时，其selected脚本属性为true。

2.select列表的长度为长度即为<option></option>的数目和。

2、初始化列表值

HTML代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><style>    div {        text-align: center;        display: inline;        height: 20px;        width: auto;        overflow: auto;        margin: auto;        position: absolute;        top: 0;        left: 0;        bottom: 0;        right: 0;    }</style><body>    <div>        <select name="provance" id="province"></select>        <select name="city" id="city"></select>        <select name="town" id="town"></select>    </div></body></html>

1.先写出可供选择列表种类的json值

        let optionKinds = {          "province": {            "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],            "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],            "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],          },          "city": {            "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],            "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],            "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],            "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],            "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']          },        };

2.初始化列表的第一个值，解决其问题为，将对象中的子元素key值，写到数组中去，方法如下

     function turn_arr(oJsonArr) {        let iCount = 0;        let turn_json_arr = [];        for (key in oJsonArr) {          turn_json_arr.push(key);        }        return turn_json_arr;      }

3.初始化列表的值

  function init(which_select, keyWord, which_select_son) {          let placeOption = '';          let option_arr = operation.turn_arr(optionKinds[keyWord]);          for (let i = 0; i < optionPro_arr.length; i++) {            placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";          }          which_select.innerHTML = placeOption;          relevance_place(which_select, keyWord, which_select_son);//初始化与之相关联的子列表        }        function relevance_place(which_select, keyWord, which_select_son) {          let placeOption_son = '';          for (let i = 0; i < which_select.length; i++) {            if (which_select[i].selected) {              for (key in optionKinds[keyWord]) {                if (key == which_select[i].value) {                  for (let i = 0; i < optionKinds[keyWord][key].length; i++) {                    placeOption_son+= "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[keyWord][key][i] + "</option>"                  }                  which_select_son.innerHTML = placeOption_son                }              }            }          }        }        init(document.getElementById('province') "province", document.getElementById('city'));        init(document.getElementById('city'), "city", document.getElementById('town'));        4.对列表选项进行监听                    EventUtil.addHandler(document.getElementById('province'), 'change', function () {          relevance_place(document.getElementById('province'), "province", document.getElementById('city'));          relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));        })        EventUtil.addHandler(document.getElementById('city'), 'change', function () {           relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));    })

整个代码如下


       
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><style>    div {        text-align: center;        display: inline;        height: 20px;        width: auto;        overflow: auto;        margin: auto;        position: absolute;        top: 0;        left: 0;        bottom: 0;        right: 0;    }</style><body>    <div>        <select name="provance" id="province"></select>        <select name="city" id="city"></select>        <select name="town" id="town"></select>    </div></body><script>    let EventUtil = {        addHandler: function (element, type, handler) {            if (element.addEventListener) {                element.addEventListener(type, handler, false)            } else if (element.attachEvent) {                element.attachEvent('on' + type, handler);            } else {                element['on' + type] = handler            }        },        removeHandler: function (element, type, handler) {            if (element.removeEventListener) {                element.removeEventListener(type, handler, false);            } else if (element.detachEvent) {                element.detachEvent("on" + type, handler);            } else {                element["on" + type] = null;            }        },        getEvent: function (event) {            return event ? event : window.event;        },        getTarget: function (event) {            return event.target || event.srcElement;        },        preventDefault: function (event) {            if (event.preventDefault) {                event.preventDefault();            } else {                event.returnValue = false;            }        },        stopPropagation: function (event) {            if (event.stopPropagation) {                event.stopPropagation();            } else {                event.cancelBubble = true;            }        }    }    let optionKinds = {        "province": {            "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],            "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],            "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],        },        "city": {            "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],            "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],            "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],            "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],            "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']        },    };    function turn_arr(oJsonArr) {        let iCount = 0;        let turn_json_arr = [];        for (key in oJsonArr) {            turn_json_arr.push(key);        }        return turn_json_arr;    }    function init(which_select, keyWord, which_select_son) {        let placeOption = '';        let option_arr = turn_arr(optionKinds[keyWord]);        for (let i = 0; i < option_arr.length; i++) {            placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";        }        which_select.innerHTML = placeOption;        relevance_place(which_select, keyWord, which_select_son); //初始化与之相关联的子列表    }    function relevance_place(which_select, keyWord, which_select_son) {        let placeOption_son = '';        for (let i = 0; i < which_select.length; i++) {            if (which_select[i].selected) {                for (key in optionKinds[keyWord]) {                    if (key == which_select[i].value) {                        for (let i = 0; i < optionKinds[keyWord][key].length; i++) {                            placeOption_son += "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[                                keyWord][key][i] + "</option>"                        }                        which_select_son.innerHTML = placeOption_son                    }                }            }        }    }    init(document.getElementById('province'), "province", document.getElementById('city'));    init(document.getElementById('city'), "city", document.getElementById('town'));    EventUtil.addHandler(document.getElementById('province'), 'change', function () {        relevance_place(document.getElementById('province'), "province", document.getElementById('city'));        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));    });    EventUtil.addHandler(document.getElementById('city'), 'change', function () {        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));    })</script></html> 
// 整个功能代码及分析如上所示。欢迎大家留言交流讨论~~

阅读全文

0 0