예전에는 지역 연계를 사용하고 싶을 때마다 기본적으로 남이 작성한 js를 활용해 다단계 연계를 사용했는데, 지역 정보가 너무 부족하다는 점이 가장 큰 단점이었습니다. 오래되어 업데이트가 불편했어요.
오늘은 2015년 최신 국가 및 지역 정보자료를 인터넷으로 검색해 보았는데, 그 데이터베이스를 활용하여 ajax와 연계하여 쉽게 자료 업데이트를 할 예정입니다
코드1 (jquery 코드, ajax 데이터 연결 앞부분 담당) :
<code><span><<span>div</span><span>class</span>=<span>"form-group"</span>></span><span><<span>label</span><span>for</span>=<span>"province"</span>></span>省份<span></<span>label</span>></span><span><<span>select</span><span>class</span>=<span>"form-control"</span><span>id</span>=<span>"province"</span><span>name</span>=<span>"province"</span>></span><span><<span>option</span><span>value</span> =<span>""</span> ></span><span></<span>option</span>></span> //volist 是thinkphp的标签,这里我用thinkphp框架写的代码,自动载入省级地区信息 <span><<span>volist</span><span>name</span>=<span>"province"</span><span>id</span>=<span>"vo"</span>></span><span><<span>option</span><span>value</span> =<span>"{$vo.class_id}"</span> ></span>{$vo.class_name}<span></<span>option</span>></span><span></<span>volist</span>></span><span></<span>select</span>></span><span><<span>label</span><span>for</span>=<span>"city"</span>></span>城市<span></<span>label</span>></span><span><<span>select</span><span>class</span>=<span>"form-control"</span><span>id</span>=<span>"city"</span><span>name</span>=<span>"city"</span>></span><span></<span>select</span>></span><span><<span>label</span><span>for</span>=<span>"county"</span>></span>县区<span></<span>label</span>></span><span><<span>select</span><span>class</span>=<span>"form-control"</span><span>id</span>=<span>"county"</span><span>name</span>=<span>"county"</span>></span><span></<span>select</span>></span><span></<span>div</span>></span><span><<span>script</span>></span><span> $(document).ready(<span><span>function</span><span>()</span>{</span><span>//省数据变动</span> $(<span>"#province"</span>).change(<span><span>function</span><span>()</span>{</span> $.post(<span>'/Home/Creat/ajax'</span>, {province:$(<span>"#province"</span>).val()}, <span><span>function</span><span>(data)</span>{</span><span>//alert('成功post回数据');</span><span>if</span>(data.info == <span>'ok'</span>) { <span>//返回ok,将市下拉框赋值</span><span>//alert(data.content);</span> col_clear(<span>'city'</span>); col_add(<span>'city'</span>,data.content); $(<span>"#city"</span>).change(); } <span>else</span> { alert(data.info); } }, <span>'json'</span>).error(<span><span>function</span><span>()</span>{</span> alert(<span>"网络连接错误,请稍后再试"</span>); }); }); <span>//市数据变动</span> $(<span>"#city"</span>).change(<span><span>function</span><span>()</span>{</span> $.post(<span>'/Home/Creat/ajax'</span>, {city:$(<span>"#city"</span>).val()}, <span><span>function</span><span>(data)</span>{</span><span>if</span>(data.info == <span>'ok'</span>) { col_clear(<span>'county'</span>); col_add(<span>'county'</span>,data.content); } <span>else</span> { alert(data.info); } }, <span>'json'</span>).error(<span><span>function</span><span>()</span>{</span> alert(<span>"网络连接错误,请稍后再试"</span>); }); }); }); <span>//select操作方法</span><span>// 添加 </span><span><span>function</span><span>col_add</span><span>(id,data)</span> {</span><span>var</span> selObj = $(<span>"#"</span>+id); <span>for</span> (<span>var</span> i=<span>0</span>;i<data.length;i++) { selObj.append(<span>"<option value='"</span>+data[i].class_id+<span>"'>"</span>+data[i].class_name+<span>"</option>"</span>); } } <span>// 删除 </span><span><span>function</span><span>col_delete</span><span>()</span> {</span><span>var</span> selOpt = $(<span>"#mySelect option:selected"</span>); selOpt.remove(); } <span>// 清空 </span><span><span>function</span><span>col_clear</span><span>(id)</span> {</span><span>var</span> selOpt = $(<span>"#"</span>+id+<span>" option"</span>); selOpt.remove(); } <span></<span>script</span>></span></code>
코드 2 (php 백엔드 데이터 판단 인터랙티브 코드, thinkphp 기반으로 작성. 다른 프레임워크라도 원리는 동일) , 코드에는 약간의 차이가 있습니다.):
<code><span>public</span><span><span>function</span><span>ajax</span><span>()</span>{</span><span>$city</span> = M(<span>'city'</span>); <span>if</span>(!IS_AJAX){ <span>$this</span>->ajaxReturn(<span>array</span>( <span>'info'</span> => <span>'非法的请求方式'</span> )); } <span>//如果提交过来的是省份改变</span><span>if</span>(I(<span>'post.province'</span>,<span>0</span>,<span>'intval'</span>)){ <span>$filter</span> = <span>array</span>( <span>'class_parent_id'</span> => I(<span>'post.province'</span>,<span>0</span>,<span>'intval'</span>), <span>'class_type'</span> => <span>2</span> ); <span>$data</span>[<span>'content'</span>] = <span>$city</span>->where(<span>$filter</span>)->select(); <span>$data</span>[<span>'info'</span>] = <span>'ok'</span>; } <span>//如果提交过来的是城市改变</span><span>if</span>(I(<span>'post.city'</span>,<span>0</span>,<span>'intval'</span>)){ <span>$filter</span> = <span>array</span>( <span>'class_parent_id'</span> => I(<span>'post.city'</span>,<span>0</span>,<span>'intval'</span>), <span>'class_type'</span> => <span>3</span> ); <span>$data</span>[<span>'content'</span>] = <span>$city</span>->where(<span>$filter</span>)->select(); <span>$data</span>[<span>'info'</span>] = <span>'ok'</span>; } <span>$this</span>->ajaxReturn(<span>$data</span>); }</code>
마지막은 제가 직접 작성한 데이터베이스입니다. 2015년 1월 국가에서 발표한 지역 정보를 바탕으로 작성되었습니다. 최신입니다.
SQL 데이터베이스 다운로드
위 내용은 데이터베이스, PHP, Ajax 기반의 레벨 3 지역 연계를 다양한 측면을 포함하여 소개하고 있으며, PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.