jquery下拉联级菜单
-
解析使用
- 采用jQuery
利用class作为识别符，将级联下拉列表框选出来。
当选项发生变化的时候，调用Ajax，访问对应的数据文件(.txt)。然后，将数据文件解析后的数据加入到下一个下拉列表框，以此类推，所有的下拉列表框都可以做到级联。
- 数据采用txt
对于相对固定的数据可以采用txt来作为数据源，每次发布的时候都无需重新启动服务器。但是对于数据源为动态源的情况，需要访问数据库。这时候只要修改对应的ajax访问URL即可。
结论：采用高度抽象以后，每增加一个下拉列表框只需要2行即可，1行用来声明下拉列表框，另一行用来定义下一个响应的下拉列表框ID
<HTML encoding="UTF-8">
<head>
<title>Cascade Drop Down</title>
<style type="text/css">
.cascade_drop_down {width:200px;
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cascade_drop_down").change(
function () {
var name = $(this).attr("name") + "_next";
var next = $("#" + name).val();
if (next == null || next == '') {
return;
}
$("#" + next).empty();
$.ajax({
type:'post',
url: $(this).val() + '.txt',
data:'name=' + name + '&val=' + $(this).val(),
dataType:'text',
success:function(msg){
ops = msg.split("\n");
for (i = 0; i < ops.length; i++) {
$("#" + next).append(ops[i]);
}
},
error:function(){
alert("failed.");
}
});
}
)
});
</script>
</head>
<body>
<div>
<input type="hidden" id="province_next" name="province_next" value="city">
<input type="hidden" id="city_next" name="city_next" value="">
<select id="province" name="province" class="cascade_drop_down">
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
<option value="heilongjiang">黑龙江</option>
<option value="jilin">吉林</option>
<option value="liaoning">辽宁</option>
</select>
<select id="city" name="city" class="cascade_drop_down">
</select>
</div>
<div>
<input type="hidden" id="brand_next" name="brand_next" value="category">
<input type="hidden" id="category_next" name="category_next" value="type">
<input type="hidden" id="type_next" name="type_next" value="series">
<input type="hidden" id="series_next" name="series_next" value="">
<select id="brand" name="brand" class="cascade_drop_down">
<option value="canon">佳能</option>
<option value="sony">索尼</option>
<option value="panasonic">松下</option>
</select>
<select id="category" name="category" class="cascade_drop_down">
</select>
<select id="type" name="type" class="cascade_drop_down">
</select>
<select id="series" name="series" class="cascade_drop_down">
</select>
</div>
</body>
</HTML>
- 高复用性代码
<option value='1'>朝阳</option>
<option value='2'>海淀</option>
<option value='3'>东城</option>
<option value='4'>西城</option>
<option value='5'>石景山</option>
<option value='6'>大兴</option>
<option value='7'>丰台</option>
<option value='8'>通州</option>
<option value='9'>房山</option>
<option value='10'>密云</option>
<option value='11'>怀柔</option>
<option value='12'>平谷</option>
<option value='13'>昌平</option>
<option value='14'>延庆</option>
<option value='15'>顺义</option>
- 2 商品是联级菜单
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
#info{
width: 350px;
height: 30px;
font-size: 12px;
float: left;
}
</style>
</head>
<body>
<div id="info">
厂商：<select name="" id="one"><option value='1'>朝阳</option>
<option value='2'>海淀</option>
<option value='3'>东城</option>
<option value='4'>西城</option>
<option value='5'>石景山</option>
<option value='6'>大兴</option>
<option value='7'>丰台</option>
<option value='8'>通州</option>
<option value='9'>房山</option>
<option value='10'>密云</option>
<option value='11'>怀柔</option>
<option value='12'>平谷</option>
<option value='13'>昌平</option>
<option value='14'>延庆</option>
<option value='15'>顺义</option></select>
品牌：<select name="" id="two"><option value="">请选择</option></select>
型号：<select name="" id="three"><option value="">请选择</option></select>
</div>
<input type="submit" name="sub" value="查询">
<script type="text/javascript">
$(function(){
//初始化
function init(obj){
return $(obj).html('<option>请选择</option>');
}
var arr = {
厂商一 : {
品牌一 : '型号1-1-1,型号1-1-2',
品牌二 : '型号1-2-1,型号1-2-2'
},
厂商二 : {
品牌一 : '型号2-1-1,型号2-1-2'
},
厂商三 : {
品牌一 : '型号3-1-1,型号3-1-2',
品牌二 : '型号3-2-1,型号3-2-2',
品牌三 : '型号3-3-1,型号3-3-2' }
};
init($('#one'));
$.each(arr,function(key,values){
$('#one').append('<option>'+key+'</option>');
});
$('#one').change(function(){
init($('#two'));
init($('#three'));
$.each(arr,function(key,values){
var select = $('#one option:selected').text();
if(select == key){
$.each(values,function(x,y){
$('#two').append('<option>'+x+'</option>');
});
$('#two').change(function(){
init($('#three'));
$.each(values,function(x,y){
var select = $('#two option:selected').text();
if(select == x){
var array = y.split(',');
$.each(array,function(){
$('#three').append('<option>'+this+'</option>');
});
}
});
});
}
});
});
});
</script>
</body>
</html>
```
