zoukankan      html  css  js  c++  java
  • 省市二级联动--使用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)

     请求成功后的效果如下图

  • 相关阅读:
    VC++6.0程序打开文件内存错误解决方法
    c++ vc6.0环境sp6补丁
    Net 应用程序如何在32位操作系统下申请超过2G的内存
    DataTable 排序
    VC UI 界面库
    让CSS兼容IE和Firefox的技巧集合
    两句CSS属性让点击图片链接时的虚线框消失
    一个常用的表单文本框input输入提示
    Css优先级分析
    清除浮动四种方法
  • 原文地址:https://www.cnblogs.com/cryst/p/6031185.html
Copyright © 2011-2022 走看看