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>
  • 相关阅读:
    PHP 抽象类
    PHP使用rabbitmq发邮件简单使用
    自定义Chrome插件Vimium
    用Paint Tool SAI绘制漫画
    AutoHotkey 使用笔记
    Unity 性能
    VS2015解决非Unicode编码包含中文字段无法编译的问题
    高DPI设置时禁用显示的方法
    Excel 统计在某个区间内数值的个数
    自定义宏把Word打造成全快捷键编辑器
  • 原文地址:https://www.cnblogs.com/520fyl/p/5403845.html
Copyright © 2011-2022 走看看