聯系官方銷售客服
1835022288
028-61286886
投訴
分享 按聯動菜單搜索的用例分享【轉】
5 0
<!--按聯動菜單搜索-->
<p style="line-height:30px">
<strong>按聯動菜單搜索：</strong>
<a class="label {if !$params.school|| dr_linkage('address', $params.school, 0, 'child')}label-success{else}label-default{/if}" target="_blank" target="_blank" href="{dr_search_url($params, 'school', NULL)}">不限</a>
<!--調用聯動菜單address，pid為動態獲取的地區id-->
{list action=linkage code=school pid=$params.school}
<a class="label {if $t.id==$params.school}label-success{else}label-default{/if}" target="_blank" target="_blank" href="{dr_search_url($params, 'school', $t.id)}">{$t.name}</a>
{/list}
</p>
這是一個動態級聯的聯動菜單用法
<div class="form-group" id="dr_row_order_city">
<div class="col-md-10">
<input type="hidden" name="data[order_city]" id="dr_order_city" value="0">
<script type="text/javascript" src="/statics/js/jquery.ld.js"></script>
<span id="dr_linkage_order_city_select" style="">
<label style="padding-right:10px;">
<select class="form-control finecms-select-order_city" name="order_city-1" id="order_city-1" width="100" >
<option value=""> -- </option>
</select>
</label>
<label style="padding-right:10px;">
<select class="form-control finecms-select-order_city" name="order_city-2" id="order_city-2" width="100" style="display:none">
<option value=""> -- </option>
</select>
</label>
<label style="padding-right:10px;">
<select class="form-control finecms-select-order_city" name="order_city-3" id="order_city-3" width="100" style="display:none">
<option value=""> -- </option>
</select></label>
</span>
<script type="text/javascript">
function dr_linkage_select_order_city() {
$("#dr_linkage_order_city_select").show();
$("#dr_linkage_order_city_cxselect").hide();
}
$(function(){
var $ld5 = $(".finecms-select-order_city");
$ld5.ld({ajaxOptions:{"url": "/index.php?s=member&c=api&m=linkage&code=address"},defaultParentId:0})
var ld5_api = $ld5.ld("api");
ld5_api.selected();
$ld5.bind("change",onchange);
function onchange(e){
var $target = $(e.target);
var index = $ld5.index($target);
//$("#order_city-4").remove();
$("#dr_order_city").val($ld5.eq(index).show().val());
index ++;
$ld5.eq(index).show();
}
})
</script>
</div>
</div>
厲害
又一個
<body>
<div class="selectList form-group">
<div class="col-md-10"><label style="padding-right:10px;">
<select class="province form-control">
<option>請選擇</option>
</select></label><label style="padding-right:10px;">
<select class="city form-control">
<option>請選擇</option>
</select></label><label style="padding-right:10px;">
<select class="district form-control">
<option>請選擇</option>
</select></label>
</div>
<script type="text/javascript">
$(function(){
$(".selectList").each(function(){
var url = "area.json";
var areaJson;
var temp_html;
var oProvince = $(this).find(".province");
var oCity = $(this).find(".city");
var oDistrict = $(this).find(".district");
//初始化省
var province = function(){
$.each(areaJson,function(i,province){
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
});
oProvince.html(temp_html);
city();
};
//賦值市
var city = function(){
temp_html = "";
var n = oProvince.get(0).selectedIndex;
$.each(areaJson[n].c,function(i,city){
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
});
oCity.html(temp_html);
district();
};
//賦值縣
var district = function(){
temp_html = "";
var m = oProvince.get(0).selectedIndex;
var n = oCity.get(0).selectedIndex;
if(typeof(areaJson[m].c[n].d) == "undefined"){
oDistrict.css("display","none");
}else{
oDistrict.css("display","inline");
$.each(areaJson[m].c[n].d,function(i,district){
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
});
oDistrict.html(temp_html);
};
};
//選擇省改變市
oProvince.change(function(){
city();
});
//選擇市改變縣
oCity.change(function(){
district();
});
//獲取json數據
$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});
</script> </div>
area.json
[
{"p":"江西省",
"c":[
{"ct":"南昌市",
"d":[
{"dt":"西湖區"},
{"dt":"東湖區"},
{"dt":"高新區"}
]},
{"ct":"贛州市",
"d":[
{"dt":"瑞金縣"},
{"dt":"南豐縣"},
{"dt":"全南縣"}
]}
]},
{"p":"北京",
"c":[
{"ct":"東城區"},
{"ct":"西城區"}
]},
{"p":"河北省",
"c":[
{"ct":"石家莊",
"d":[
{"dt":"長安區"},
{"dt":"橋東區"},
{"dt":"橋西區"}
]},
{"ct":"唐山市",
"d":[
{"dt":"灤南縣"},
{"dt":"樂亭縣"},
{"dt":"遷西縣"}
]}
]}
]
樓主配圖最好
樓主加QQ聊下唄 ，我有這個功能的需求！