【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】三级联动菜单的制作相关推荐

ajax js java省市三级联动菜单,AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有javascript中的代码为: $(document). ...
中国地区三级联动菜单(纯js制作)
第一步:在网页中写入如下代码: <!DOCTYPE html>  <html> <head ...
基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
JS实现的五级联动菜单效果完整实例
https://www.jb51.net/article/106525.htm 本文实例讲述了JS实现的五级联动菜单效果.分享给大家供大家参考,具体如下: js实现多级联动的方法很多,这里给出一种5级 ...
php mysql三级联动,PHP+mysql实现的三级联动菜单功能示例
本文实例讲述了php+mysql实现的三级联动菜单功能.分享给大家供大家参考,具体如下: 数据库mysql -- 数据库: `student` -- -- ---------------------- ...
php创建无限级树型菜单以及三级联动菜单
http://www.php.cn/php-weizijiaocheng-373500.html 这篇文章主要介绍了php创建无限级树型菜单 ,主要使用的是递归函数,感兴趣的小伙伴们可以参考一下写递 ...
html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择省/ ...
js实现省市区三级联动(三个下拉框实现)
js实现省市区三级联动(一个下拉框实现.页面可以多次引用) html代码: 您选择的是: <input type="text" value="" id=& ...
纯js实现省市区三级联动
纯js实现省市区三级联动话不多说,直接上整篇代码 <!DOCTYPE html> <html lang="en"> <head><met ...

【js与jquery】三级联动菜单的制作

【js与jquery】三级联动菜单的制作相关推荐

最新文章

热门文章