简单的三级联动

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script src="jquery-1.8.2.min.js"></script>
</head>
<body>

<select name="" id="sheng">
<option value="">--请选择省--</option>
</select>

<select name="" id="shi">
<option value="">--请选择市--</option>
</select>

<select name="" id="xian">
<option value="">--请选择区县--</option>
</select>
<script>
// 定义数据省和市关系
var S={};
S['河北省']=['石家庄','承德'];
S['山东']=['青岛','烟台'];
S['河南']=['郑州','安阳'];
// 定义市和县的关系
var s={};
s['石家庄']=['正定','藁城','桥西'];
s['承德']=['兴隆','隆华'];
s['青岛']=['市南','市北','崂山'];
s['烟台']=['芝罘','福山'];
s['郑州']=['金水','上街'];
s['安阳']=['文峰','林州'];

var str='<option value="">--请选择省--</option>';
//遍历省的随想拿到对象里面的键写入select
for(i in S){
// console.log(i);
str+='<option value="' + i + '">'+i+'</option>';
}
// console.log(str);
$('#sheng').html(str);

// 给省绑定change()事件
$('#sheng').change(function(){
var str1='<option value="">--请选择市--</option>';
// console.log($(this).val());
// 获取当前选中选项的value值 value对应市
var Val=$(this).val();
//通过索引回去对应的值(市)
// console.log(S[Val]);
for(i in S[Val]){
var Index=S[Val][i];
// console.log(Index);
str1+='<option value="'+Index+'">'+Index+'</option>';
}
// 将拼接好的数据写入市里
$('#shi').html(str1);
})

$('#shi').change(function(){
var str2='<option value="">--请选择区县--</option>';
// console.log($(this).val());
// 获取当前选中选项的value值 value对应县

var Val=$(this).val();
//通过索引回去对应的值(县)
// console.log(S[Val]);
for(i in s[Val]){
var Index=s[Val][i];
// console.log(Index);
str2+='<option value="'+Index+'">'+Index+'</option>';
}
// 将拼接好的数据写入县里
$('#xian').html(str2);
})
</script>
</body>
</html>

jquery-1.8.2.min.js下载地址https://www.cr173.com/soft/64083.html

猜你喜欢