zoukankan      html  css  js  c++  java
  • 关于在smarty中实现省市区三级联动

    刚开始接触php,,其实对于一些比较深入的东西还不是很了解,就像是这次的省市区联动,都是用三张表为基础编码的,原谅我的无知,谢谢。

    接下来就是编码部分了:

    <?php
    require('./smarty/Smarty.class.php');
    date_default_timezone_set("PRC");
    $conn = mysql_connect("localhost","root","123456");
    mysql_select_db("dbcity");
    mysql_query("set names utf8");
    
    $sql = " select pid,pname  from province";
    $result = mysql_query($sql,$conn);
    while ($rs = mysql_fetch_assoc($result)){  
        $list[] = array("pid" => $rs["pid"],"pname" => $rs["pname"]);
    }
    
    
    $sql2 = "select cid,cname from city where pid={$list[0]['pid']}";
    $result2 = mysql_query($sql2,$conn);
    while($rs2 = mysql_fetch_assoc($result2)){
        $list2[] = array("cname" => $rs2["cname"],"cid" =>$rs2["cid"]);
    }
     
    
    $sql3 = "select xname,xid from xian where cid={$list2[0]['cid']}";
    $result3 = mysql_query($sql3,$conn);
    while($rs3 = mysql_fetch_assoc($result3)){
        $list3[] = array("xname" => $rs3["xname"]);
    }
    
    
    $smarty = new Smarty();
    $smarty->left_delimiter='<{';//左边界符
    $smarty->right_delimiter='}>';//右边界符
    $smarty ->assign("content",$list);
    $smarty ->assign("name",$list2);
    $smarty ->assign("xian",$list3);
    $smarty ->display("show.html");
    
    ?>

    以上是为了从数据库中把所有的先加载出来,主要就是用到smarty,数组。其他的都没有什么可以深究的了,可以看到上面代码的最后一句话就是为了跳转到smarty的模板页面show.html

    接下来我们来共同看一下模板页面的书写代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>省市级联</title>
     6 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
     7 <script type="text/javascript">
     8 $(function(){
     9     $("#province").change(function() {   
    10         var province = $("#province").val(); 
    11         alert(province);
    12         $.ajax({
    13             url: 'display.php',
    14             type: 'GET',
    15             data: {'category':'city', city:province},
    16             dataType:'json',
    17             success: function(data){
    18                 var content = '';
    19                 for (var i in data) {    
    20                     content += '<option value='+data[i].cid+'>'+data[i].cname+'</option>';
    21                 }
    22                 $('#city').html(content);
    23             }
    24         });  //  'abc."$age".def'
    25     });
    26     $("#city").change(function(){
    27         var city = $("#city").val();
    28         alert(city);
    29         $.ajax({
    30             url:'assign.php',
    31             type:'GET',
    32             data:{'category':'xian',xian:city},
    33             dataType:'json',
    34             success:function(data){
    35                 var content = '';
    36                 for(var i in data){
    37                     content +='<option>'+data[i].xname+'</option>';
    38                 }
    39                 $('#xian').html(content);
    40             }
    41         })
    42     })
    43 })
    44 </script>
    45 </head>
    46 <body>
    47   选择省份:<select name="province" id="province" style="100px;" onclick="click" >
    48   <{foreach from=$content key=k item=value}> 
    49        <option value="<{$value.pid}>"><{$value.pname}></option> 
    50   <{/foreach}>
    51   </select>  <br/>
    52   选择城市:<select name="city" id="city" style="100px;">
    53    
    54   <{foreach from=$name  item=value2}> 
    55        <option value="<{$value2.cid}>"><{$value2.cname}></option>
    56   <{/foreach}>    
    57   </select><br/>
    58     选择县城:<select name="xian" id="xian" style="100px;">
    59    
    60   <{foreach from=$xian  item=value3}> 
    61        <option><{$value3.xname}></option>
    62   <{/foreach}>    
    63   </select><br/>
    64 </body>
    65 </html>

    这里的命名不是规范,希望不要误导大家,,大家在自己编写代码的时候还是要注意自己的编码规范的。首先,我们可以看到“选择省份”的select标签,这里我们就是根据index.php页面传过来的数组利用foreach进行循环遍历,遍历出省份的id,省份名称。在这里,省份的id是必不可少的,因为它牵扯到接下来select的change事件,所以一定要注意这个地方。接下来就是异步提交的ajax事件了,我们根据之前给select的id叫做province来做他的change事件,这里ajax大家就要自己对ajax进行学习了,其实,在php里面使用smarty模板引擎是为了将后台代码与前台展示代码分离开来,但是这里为了大家能够看得仔细,所以将JavaScript代码放在页面里了,最好是在项目里面写一个JavaScript脚本然后进行导入,有利于页面的整洁,我们先看省份的ajax代码,我们在它的url属性里面让它进入到display.php页面,

    so,接下来就是display页面的代码了

     1 <?php
     2 date_default_timezone_set("PRC");
     3 $conn = mysql_connect("localhost","root","123456");
     4 mysql_select_db("dbcity");
     5 mysql_query("set names utf8");
     6 if($_GET['category']){          
     7    if($_GET["category"] != "") {
     8    //根据省份得到城市
     9    $sql = "select cid,cname from city where pid=".$_GET['city'];
    10    $result = mysql_query($sql,$conn);
    11    if (mysql_num_rows($result) > 0) {
    12    while ($row = mysql_fetch_assoc($result)) {
    13         $str[] = array("cid"=>$row["cid"],"cname"=>($row["cname"]));
    14    }
    15    //var_dump($str);
    16    echo (json_encode($str));
    17    }
    18    mysql_free_result($result);
    19   }
    20 }
    21 
    22 
    23 ?>

    在这里,我们使用GET方法获取之前ajax传过来的参数,获取点击省份时候的id,根据这个id来获取这个省份下面的城市。当然了,之后的城市下面的区我们就显而易见了,但是特别要注意的是要把城市的select标签的value值获取获取出来,以便查询它所管辖的区。

    assign.php代码如下

     1 <?php
     2 date_default_timezone_set("PRC");
     3 $conn = mysql_connect("localhost","root","123456");
     4 mysql_select_db("dbcity");
     5 mysql_query("set names utf8");
     6 if($_GET['category']){
     7     if($_GET["category"] != "") {
     8         //根据省份得到城市
     9         $sql = "select xid,xname from xian where cid=".$_GET['xian'];
    10         $result = mysql_query($sql,$conn);
    11         if (mysql_num_rows($result) > 0) {
    12             while ($row = mysql_fetch_assoc($result)) {
    13                 $str[] = array("id"=>$row["xid"],"xname"=>($row["xname"]));
    14             }
    15             //var_dump($str);
    16             echo (json_encode($str));
    17         }
    18         mysql_free_result($result);
    19     }
    20 }
    21 ?>

    希望我的提示能够对你有所帮助,谢谢!

  • 相关阅读:
    「板子」环形带限制的子段和
    【模版】拓扑排序
    【模板】点分治
    扬声大笑出门去,我辈岂是蓬蒿人
    JAVA JDK(3)—— jdk7特性
    电路原理 —— 三相电路(1.5)
    JAVA JDK(2)—— jdk6特性
    数据结构 —— 栈和队列
    电路原理(六) —— 正弦稳态电路分析(1)
    静电场(完) —— 静电场的环路定理 电势
  • 原文地址:https://www.cnblogs.com/chengzhi59/p/7146771.html
Copyright © 2011-2022 走看看