您的位置：首页 > Web前端 > JavaScript

原生JS方法写三级联动

2017-06-21 17:07 302 查看
      最近在练习项目时，遇到了三级联动问题，于是就在本地用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]) {

b5cc
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> 
// 整个功能代码及分析如上所示。欢迎大家留言交流讨论~~



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                原生JS
                                                三级联动
                                                WEB前端
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航