省市二级联动--使用app-jquery-cityselect.js插件

只有省市二级联动,三级联动还没处理好,会尽快完善。

嵌入id:

<div class="form-group">
     <label>地址</label>
     <p>从:</p>
        <div class="input-group">
           <input id="areaIdFrom" name="areaIdFrom" type="hidden" value="" />            <input id="provinceFrom" name="provinceFrom" type="hidden" />           <input id="cityFrom" name="cityFrom" type="hidden" />
           <div id="areaGroupFrom"></div>
        </div>
        <input type="text" class="form-control" name="addressFrom"/>
     <p>到:</p>
        <div class="input-group">
           <input id="areaIdTo" name="areaId" type="hidden" value="" />            <input id="provinceTo" name="province" type="hidden" />           <input id="cityTo" name="city" id="moveCity" type="hidden" />
           <div id="areaGroupTo"></div>
        </div>
        <input type="text" class="form-control" name="address" id="moveAddress"/>
</div>

编写js:

<script type="text/javascript">
    var areaIdFrom = $("#areaIdFrom");
    var provinceFrom = $("#provinceFrom");
    var cityFrom = $("#cityFrom");

    var areaIdTo = $("#areaIdTo");
    var provinceTo = $("#provinceTo");
    var cityTo = $("#cityTo");

    $("#areaGroupFrom").cityselect({
        loadProvince: handleLoadProvince,
        loadCity: handleLoadCity,
        onAreaIdChanged: function(id) {
            areaIdFrom.val(id);
        },
        onProvinceChanged: function(id, name) {
            provinceFrom.val(name);
        },
        onCityChanged: function(id, name) {
            cityFrom.val(name);
        }
    });
    $("#areaGroupTo").cityselect({
        loadProvince: handleLoadProvince,
        loadCity: handleLoadCity,
        onAreaIdChanged: function(id) {
            areaIdTo.val(id);
        },
        onProvinceChanged: function(id, name) {
            provinceTo.val(name);
        },
        onCityChanged: function(id, name) {
            cityTo.val(name);
        }
    });
   function handleLoadProvince() {
        var list = [];
        $.HTTP.list({
            url: "${aapi}/area/province", //${aapi}/area/province
            success: function(l) {
                list = l;
            }
        });
        return list;
    }

    function handleLoadCity(provinceId) {
        var list = [];
        $.HTTP.list({
            url: "${aapi}/area/city/" + provinceId, //  ${aapi}/area/city/
            success: function(l) {
                list = l;
            }
        });
        return list;
    }

</script>
加载省份数据:${aapi}/area/province

加载省份为内蒙古的地级市数据:${aapi}/area/city/" + provinceId(传入内蒙古的id)

请求成功后的效果如下图。

时间: 2024-11-17 11:40:30

省市二级联动--使用app-jquery-cityselect.js插件的相关文章

jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 二.插件作者及网址 作者:暂无(请作者看到后联系我[email protected],好标上你的大名)官方网址:无官方DEMO:无最新版本:日期201

(转)JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动 原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

JS实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF

js省市二级联动实例

//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select id="province" onchange="func1(this)"> </sele

JS——省市二级联动

1.核心代码: <script> var cities = new Array(11); cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区"); cities[1] = new Array(); cit

jQuery_完成省市二级联动

当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: 代码如下: <!DOCTYPE html> <html> <head> <script typr="text/javascript" src="js/jquery-1.8.3.js"></script> <

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通

jsp+ajax+serverlet实现省市二级联动

jsp界面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g