【js与jquery】三级联动菜单的制作
2019獨角獸企業重金招聘Python工程師標準>>>
1.效果如圖所示:
2.html代碼:
[php]?view plaincopy
????<li><span?class="receiving">所在地區:</span>??
<span?id="addr_select">??
????????<select?id='province_select'?name='province'></select>???
????????<span?id="city_select_poss"?class="ssq"></span>??
????????<span?id="town_select_poss"?class="ssq"></span>??
</span>??
<font?color="#FF0000">*</font>??
????</li>??
?????<li>??
?<span?class="receiving">街道地址:</span><span?id="pre-address"></span>??
?<input?type="text"?id="add_addr_input"?name="address"?value=""?style="width:?180px;"/>??
?<font?color="#FF0000">?*</font><em?id="add_addr_input_info"></em>??
????</li>??
?????<li>??
?<span?class="receiving">郵政編碼:</span>??
?<input?type="text"?value=""?id="postcode_add"?name="postcode"?style="width:?180px;"/>??
?<font?color="#FF0000">?</font>??
t;/li>??
3.jquery代碼:
[php]?view plaincopy
$(document).ready(function(){??
????province_list();//加載省份下拉菜單??
????$("#province_select").change(function(){//省份選項發生改變時??
????????var?province?=?$("#province_select").val();??
????????$("#pre-address").html(province);??
????????showcity(province);//省份發生變化時,城市下拉菜單也要隨之變化??
????????$("#postcode_add").attr('value',?'');//在選擇town項時,會自動獲取郵政編碼??
????})??
})??
??
//省份下拉菜單??
function?province_list(){??
????$.getJSON('/?c=addr&a=getprovince',??
????????????{},??
????????????function(data){??
????????????????$("#province_select").append("");??
????????????????$.each(data,function(i,k){??
????????????????????if?(?i==0?)?{??
????????????????????????$("#province_select").append("<option?selected>請選擇</option><option?value='"+k.local_name+"'?>"+k.local_name+"</option>");??
????????????????????????showcity(k.local_name);??
????????????????????}?else?{??
????????????????????????$("#province_select").append("<option?value='"+k.local_name+"'>"+k.local_name+"</option>");??
????????????????????}??
????????????????})??
????????????});??
}??
//顯示城市下拉菜單??
function?showcity(province){??
????$.getJSON('/?c=addr&a=getcity',??
????????????{province:province},??
????????????function(data){??
????????????????$("#city_select_poss").html("");??
????????????????$("#town_select_poss").html("");??
????????????????if?(data)?{??
????????????????????$("#city_select_poss").html("<select?id='city_select'?name='city'?onChange='city_select_function();'></select>");??
????????????????}??
????????????????$("#city_select").html("");??
????????????????$.each(data,function(i,k){??
????????????????????if?(?i?==?0){??
????????????????????????$("#city_select").append("<option??selected>請選擇</option><option?value='"+k.local_name+"'>"+k.local_name+"</option>");??
????????????????????????var?addr?=?province?+?k.local_name;??
????????????????????????//$("#pre-address").html(addr);??
????????????????????????showtown(k.local_name);??
????????????????????}?else?{??
????????????????????????$("#city_select").append("<option?value='"+k.local_name+"'>"+k.local_name+"</option>");??
????????????????????}??
????????????????})??
????????????})??
}??
??
//顯示城鄉下拉菜單??
function?showtown(city){??
????$.getJSON('/?c=addr&a=gettown',??
????????????{city:city},??
????????????function(data){??
????????????????if?(data)?{??
????????????????????$("#town_select_poss").html("<select?id='town_select'?name='town'?οnchange='town_select_function();'></select>");??
????????????????}?else?{??
????????????????????$("#town_select_poss").html("");??
????????????????}??
????????????????$("#town_select").html("");??
????????????????$.each(data,function(i,k){??
????????????????????if?(?i?==?0?)?{??
????????????????????????$("#town_select").append("<option?selected>請選擇</option><option?value='"+k.local_name+"'>"+k.local_name+"</option>");??
????????????????????}?else?{??
????????????????????????$("#town_select").append("<option?value='"+k.local_name+"'>"+k.local_name+"</option>");??
????????????????????}??
????????????????})??
????????????}??
????????????)??
}??
//獲取郵政編碼??
function?getPostCode(town,?city,?province,id){??
????$.get('/?c=addr&a=getpost',??
????????????{town:town,city:city,province:province},??
????????????function(?data?){??
????????????????if?(?data?>?0?)?{??
????????????????????if?(?id?==?""?||?id==?undefined)?{??
????????????????????????$("#postcode_add").attr('value',?data);??
????????????????????}?else?{??
????????????????????????$("#"+id+"postcode_add").attr('value',?data);??
????????????????????}??
????????????????}?else?{??
????????????????????//$("#postcode_add").attr('value',?'');??
????????????????????if?(?id?==?""?||?id==?undefined)?{??
????????????????????????$("#postcode_add").attr('value',?'');??
????????????????????}?else?{??
????????????????????????$("#"+id+"postcode_add").attr('value',?'');??
????????????????????}??
????????????????}??
????????????}??
????????)??
}??
??
//城市選項發生改變時,觸發此函數??
function?city_select_function()?{??
????var?province?=?$("#province_select").find("option:selected").text();??
????var?city?=?$("#city_select").find("option:selected").text();??
????var?addr?=?province?+?city;??
????$("#pre-address").html(addr);??
????showtown(city);??
????var?town?=?$("#town_select").find("option:selected").text();??
????getPostCode(town,?city,?province);??
}??
??
//城鄉選項發生變化時,觸發此函數??
function?town_select_function(){??
????var?province?=?$("#province_select").find("option:selected").text();??
????var?city?=?$("#city_select").find("option:selected").text();??
????var?town?=?$("#town_select").find("option:selected").text();??
????var?addr?=?province?+?city?+?town;??
????$("#pre-address").html(addr);??
????getPostCode(town,?city,?province);??
}??
轉載于:https://my.oschina.net/yonghan/blog/524060
總結
以上是生活随笔為你收集整理的【js与jquery】三级联动菜单的制作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c 语言 单链表的操作 易考点
- 下一篇: C#集合u