省市区三级联动问题记录
Posted yangboom
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区三级联动问题记录相关的知识,希望对你有一定的参考价值。
做了很多的联动效果了,直到今天才发现中间有些小问题,此时此刻我跟大家分享一下。
原理简述一下:首先得有一个无限极分类表【比如地区表】然后加载出来省,给省绑定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地址来连接 更加保险一些。
以上是关于省市区三级联动问题记录的主要内容,如果未能解决你的问题,请参考以下文章