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 ?>

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

  • 相关阅读:
    c语言结构体数组引用
    c语言结构体数组定义的三种方式
    如何为SAP WebIDE开发扩展(Extension),并部署到SAP云平台上
    SAP SRM ABAP Webdynpro和CFCA usb key集成的一个原型开发
    使用SAP API portal进行SAP SuccessFactors的API测试
    SAP UI5应用里的页面路由处理
    在SAP WebIDE Database Explorer里操作hdi实例
    如何使用SAP事务码SAT进行UI应用的性能分析
    使用SAP WebIDE进行SAP Cloud Platform Business Application开发
    SAP CRM WebClient UI ON_NEW_FOCUS的用途
  • 原文地址:https://www.cnblogs.com/sisl/p/4601738.html
Copyright © 2011-2022 走看看