zoukankan      html  css  js  c++  java
  • jQuery城市四级联动

    今天做了个城市四级联动jquery方法,简单实现了调用数据的城市四级联动所需要的功能。此方法仅供逻辑思维参考,请勿直接复制,可能与实际功能不符。

                  <tr class="qrows">
                            <th class="hidden-sm col-md-1 borderd"> 区域 </th>
                            <td class="col-sm-12 col-md-4 borderd" data-title="区域">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-3">
                                        <select name="province" class="form-control" id="province" onchange="getCity('province','city');">
                                            <option value="">请选择</option>
                                            <loop data="result">
                                              <option value="{a_id}-{a_level}">{a_name}</option>
                                            </loop>
                                            </select>
                                    </div>
    
                                    <div class="clearfix visible-xs-block"></div>
                                    <div class="col-xs-12 col-sm-3" >
                                        <select class="form-control" onchange="getCity('city','county');"  id="city">
                                              <option value="">请选择</option>
                                            </select>
                                    </div>
    
                                    <div class="clearfix visible-xs-block"></div>
                                    <div class="col-xs-12 col-sm-3">
                                        <select class="form-control" onchange="getCity('county','area');"  id="county">
                                              <option value="">请选择</option>
    
                                            </select>
                                    </div>
    
                                    <div class="clearfix visible-xs-block"></div>
                                    <div class="col-xs-12 col-sm-3">
                                        <select class="form-control" id="area">
                                              <option value="">请选择</option>
                                            </select>
                                    </div>
                                </div>
                            </td>
                </tr>
    <script type="text/javascript">
        /*城市四级联动:id1为联动的取值ID;id2为联动的写入值ID*/
        function getCity(id1,id2){
            var setval = $("#"+id1).val();
            var arry = setval.split("-");
            /*写入不同的代理等级*/
            if(id1 == 'province'){
                $("#level label").html('');
                $("#level label").html(arry[1]+"级");
                $("#level input[name='level']").val(arry[1]);
            }
            /*获取城市联动的下级值*/
            if(setval.length > 0){
                $.ajax({
                    type: "post",
                    cache: false,
                    data:{'_ajax': 1, id: arry[0]},
                    url: '/company/area.json',
                    dataType: "html",
                    success: function (res) {
                            $("#"+id2).html('');
                            $("#"+id2).html(res);
                        }
                });
            }
        }
    
    </script>
  • 相关阅读:
    Apache ActiveMQ 远程代码执行漏洞 (CVE-2016-3088)案例分析
    linux 软中断过高性能优化案例
    jvm默认的并行垃圾回收器和G1垃圾回收器性能对比
    JVM性能参数优化
    一次压测中tomcat生成session释放不及时导致的频繁fullgc性能优化案例
    sed命令实现文件内容替换总结案例
    You have new mail in /var/spool/mail/root消除提示的方法
    zookeeper常用命令
    mongodb输错命令后不能删除问题
    centos环境gcc版本升级
  • 原文地址:https://www.cnblogs.com/520fyl/p/5403845.html
Copyright © 2011-2022 走看看