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>
```
