码迷,mamicode.com
首页 > 其他好文 > 详细

省市区三级联动问题记录

时间:2017-11-11 11:45:51      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:inner   绑定   下拉   百度   cal   element   itop   log   text   

做了很多的联动效果了,直到今天才发现中间有些小问题,此时此刻我跟大家分享一下。

 

 

原理简述一下:首先得有一个无限极分类表【比如地区表】然后加载出来省,给省绑定change事件,然后到数据库去查询parent_id=当前传过去的Id的所有市区,然后返回一个json数据到客户端,接着客户端拿到json数据进行遍历(for(var p in da))创建option节点,再把节点绑定到下拉框下。

 

下面直接放出代码给大家看看:

前端代码如下:

<!--
    这里是可以两个函数同步到一个函数里
-->
<script type="text/javascript">
    $(document).ready(function(e){
        $("#city option").remove();
        $("#district option").remove();
        $("#city").append("<option value=‘0‘ style=‘color:#999‘>请选择市</option>");
        $("#district").append("<option value=‘0‘ style=‘color:#999‘>请选择区县</option>");
    });
    <!--
     变化城市
    -->
    function changeCity(obj) 
    {
        var id = $(obj).attr(‘id‘);
        var sub_obj = document.getElementById(‘city‘);
        var lx = ‘-请选择市-‘;
        document.getElementById(‘district‘).options.length = 0;
        var initoption2 = document.createElement(‘option‘);
        initoption2.value = 0
        initoption2.text =  "-请选择区县-";
        document.getElementById(‘district‘).options.add(initoption2);   
        sub_obj.options.length = 0;
        var initoption = document.createElement(‘option‘);
        initoption.value = 0
        initoption.text =  lx;
        sub_obj.options.add(initoption);
        var value = obj.value;
        if( value != 0 ) {
            var data = {‘id‘: id, ‘value‘: value, ‘name‘: name};
            var url = "{:U(‘ChangeSelectAjax‘)}";           
            $.post(url,data,function(data){
                for (var p in data) {
                    optionEle = document.createElement(‘option‘);
                    optionEle.value = data[p].area_id;
                    optionEle.text =  data[p].area_name;
                    sub_obj.options.add(optionEle);

                }
            },‘json‘);
        }
    }
   <!--
       变化区县
   -->
    function changeDistrict(obj){
        var id = $(obj).attr(‘id‘);
        var sub_obj = document.getElementById(‘district‘);            
        var lx = ‘-请选择区县-‘;
        $(sub_obj).find("option:eq(0)").remove();
        sub_obj.options.length = 0;
        var initoption = document.createElement(‘option‘);
        initoption.value = 0
        initoption.text =  lx;
        sub_obj.options.add(initoption);
        var value = obj.value;
        if( value != 0 ) {
            var data = {‘id‘: id, ‘value‘: value, ‘name‘: name};
            var url = "{:U(‘ChangeSelectAjax‘)}";           
            $.post(url,data,function(data){
                for (var p in data) {
                    optionEle = document.createElement(‘option‘);
                    optionEle.value = data[p].area_id;
                    optionEle.text =  data[p].area_name;
                    sub_obj.options.add(optionEle);

                }
            },‘json‘);
        }
    }
</script>
<body>
    地区:
    <select id="province" onchange="changeCity(this);">
             <option value="0" style="color:#999;"  >-请选择省-</option>
        <foreach name="province" item="pk" >
             <option value="<?=$pk[‘area_id‘]?>" style="color:#999;"  >-<?=$pk[‘area_name‘]?>-</option>
        </foreach>
        <lect>
       <select id="city" onchange="changeDistrict(this);">
        <lect>
        <select id="district">
        <lect>

</body> 

 后台代码如下:

/*使用tp3.2开发的*/
public function address()
{
$data = $this->user_address->select(); /*读取省并渲染到页面*/ $province = $this->user_address->where(‘parent_id=1‘)->select(); if (!empty($province)) { $this->assign("province",$province); $this->display(":address"); } else { $this->error("暂时不可添加地区"); } } /*读取市或区县*/ public function ChangeSelectAjax()
{
$post = I(‘post.‘); $post[‘name‘] = $parid; $city = $this->user_address->where("parent_id={$post[‘value‘]}")->select(); die(json_encode($city)); }

代码有冗余,已经改了,只是目前不在手上。

然后我来说说遇到的问题:

1.下拉菜单不加载出来,需要点击一次下拉框才会出来

 原因:由于页面初始化的时候市和区县加入了一个首选项,然后下拉框高度就存在了。比如选择某个省后得到所属市。之前一直是拼接字符串,然后使用innerHTML的将字符串填充上去。这样导致的后果就是由于高度之前有了,没改变它的高度,那么下拉框就会被隐藏,只保留一个optiion的内容高度。

解决:

  一、改成上面的写法。每次change的时候重置下拉框的额option,然后创建新的option节点,使得高度变化

  二、change的时候修改下拉框的高度=默认高度*option的个数 没有试过该方法,不知道可行还是不可行

2.以增加节点的方式后,偶尔出现下拉框高度不够的问题

想了许久,发现偶尔出现问题的原因是由于访问数据慢,服务端响应到客户端的时间变慢 导致下拉框加载变慢

解决

将mysql的主机配置从localhost改成127.0.0.1

为什么这样就行?

百度搜索 localhost 与 127.0.0.1

自己百度的一点理解如下:

自己手写一段代码的时候发现一个问题  链接数据库的时候 用 127.0.0.1比localhost明显的快,localhost要等一下才会有响应 而127.0.0.1就是瞬间响应。一番排查,发现了一个问题,好像是win7 localhost指向ipv6 的问题。我尝试这 ping localhost 得到的数据是

技术分享

看来是这里作祟,于是我在host指向解析文件中 把 localhost 指向 127.0.0.1

技术分享

马上就变快了,用localhost和用127.0.0.1就没有那么大的差异了。看来链接数据库最好还是用ip地址来连接 更加保险一些。

省市区三级联动问题记录

标签:inner   绑定   下拉   百度   cal   element   itop   log   text   

原文地址:http://www.cnblogs.com/YangJieCheng/p/7817879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!