JavaScript实现的级联算法示例【省市二级联动功能】
程序员文章站
2022-03-21 14:01:06
本文实例讲述了javascript实现的级联算法。分享给大家供大家参考，具体如下：
本文实例讲述了javascript实现的级联算法。分享给大家供大家参考，具体如下：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>linkdemo</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</script>
<script type="text/javascript">
var shengshistring = "1_山东省-11_德州市+12_青岛市+13_济南市~2_河北省-21_邯郸市*211_临漳县/212_磁县+22_石家庄市*221_定县/222_宁县+23_保定市";
$(document).ready(function(){
init();
});
function init(){
var shengarray = shengshistring.split("~");
for (var i = 0; i < shengarray.length; i++) {
var sheng = shengarray[i].split("-")[0];
var shi = shengarray[i].split("-")[1];
var shengid = sheng.split("_")[0];
var shengname = sheng.split("_")[1];
var newoption = $("<option></option>");
$(newoption).val(shengid);
$(newoption).text(shengname);
$("#sheng").append(newoption);
if (i == 0) {
shengchange(shengid);
}
}
}
function shengchange(shengidparam){
$("#shi").empty();
var shengarray = shengshistring.split("~");
for (var i = 0; i < shengarray.length; i++) {
var shengstring = shengarray[i].split("-")[0];
var shistring = shengarray[i].split("-")[1];
var shengid = shengstring.split("_")[0];
if (shengidparam == shengid) {
var shiarray = shistring.split("+");
for (var j = 0; j < shiarray.length; j++) {
var shistring = shiarray[j].split("*")[0];
var shi = shistring;
var shiid = shi.split("_")[0];
var shiname = shi.split("_")[1];
var newoption = $("<option></option>");
$(newoption).val(shiid);
$(newoption).text(shiname);
$("#shi").append(newoption);
if (shiname == "邯郸市" || shiname == "石家庄市") {
shichange(shiid);
}
}
}
}
}
function shichange(shiidparam){
$("#xian").empty();
var shengarray = shengshistring.split("~");
for (var i = 0; i < shengarray.length; i++) {
var shengstring = shengarray[i].split("-")[0];
var shistring = shengarray[i].split("-")[1];
var shengid = shengstring.split("_")[0];
var shiarray = shistring.split("+");
for (var j = 0; j < shiarray.length; j++) {
var shistring = shiarray[j].split("*")[0];
var xianarray = shiarray[j].split("*")[1];
var shi = shistring;
var shiid = shi.split("_")[0];
var shiname = shi.split("_")[1];
if (shiid == shiidparam) {
var xian = xianarray.split("/");
for (var s = 0; s < xian.length; s++) {
var xianid = xian[s].split("_")[0];
var xianname = xian[s].split("_")[1];
var newoption = $("<option></option>");
$(newoption).val(xianid);
$(newoption).text(xianname);
$("#xian").append(newoption);
}
}
}
}
}
</script>
</head>
<body>
<select id="sheng" onchange="shengchange(this.value)">
</select>
<select id="shi" onchange="shichange(this.value)">
</select>
<select id="xian">
</select>
</body>
</html>
使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码，运行效果如下图所示：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。