运用json和jQuery实现下拉列表的动态更新

需要实现下拉列表动态更新的html代码:

  <tr>

    <td>厂区</td>

    <td><select name="site" OnChange="getdepart();" id="site">

    <option value="西青">西青</option>

    <option value="津南">津南</option>

    </select></td>

  </tr>

  <tr>

    <td>部门</td>

    <td><select name="number" id="department">

    </select></td>

  </tr>

将第二个select选择框里的东西留空,在第一个写上OnChange属性,内容填要调用的js函数名称.

另:这2个select框都必须有自己的ID名字,方便js寻找.

首先在这个页面中导入jQuery库(此处略),在这个页面里插入如下js代码:

function getdepart(){

    var para;

    para = $('#site').attr("value");

    if (para == "西青") {

        para = 1;

    } else {

        para = 2;

    }

    $.getJSON("get_dept.php",{site:para},function(JSON){

        $("#department").empty();

        $.each(JSON,function(i,n){

            $("<option value="+i+">"+i+" -- "+n+"</option>").appendTo("#department");

        });

    });

}
 
创建get_dept.php文件,代码如下:
<?php

include("dbconnect.php");

$site = 
     
     

      
      需要实现下拉列表动态更新的html代码:
     
     

    
    

     
     
  <tr>

    <td>厂区</td>

    <td><select name="site" OnChange="getdepart();" id="site">

    <option value="西青">西青</option>

    <option value="津南">津南</option>

    </select></td>

  </tr>

  <tr>

    <td>部门</td>

    <td><select name="number" id="department">

    </select></td>

  </tr>
将第二个select选择框里的东西留空,在第一个写上OnChange属性,内容填要调用的js函数名称.
另:这2个select框都必须有自己的ID名字,方便js寻找.
首先在这个页面中导入jQuery库(此处略),在这个页面里插入如下js代码:
function getdepart(){

    var para;

    para = $('#site').attr("value");

    if (para == "西青") {

        para = 1;

    } else {

        para = 2;

    }

    $.getJSON("get_dept.php",{site:para},function(JSON){

        $("#department").empty();

        $.each(JSON,function(i,n){

            $("<option value="+i+">"+i+" -- "+n+"</option>").appendTo("#department");

        });

    });

}
 
创建get_dept.php文件,代码如下:
___FCKpd___7
由于内部传输数据的时候,害怕因中文字符导致数据出错,故事用数字来代替中文字符,在js中和php中都进行了相应的判断.在PHP中,讲sql语句得到的结果通过json封装,并由js来解析json数据.
以上代码实现了下拉列表的自动更新,页面中数据的传递使用的是json而非xml,节省网络传输带宽.


    
    

GET['site']; if ($site == '1') { $site = '西青'; } else if ($site == '2') { $site = '津南'; } $sql = "select * from departments where dept_site ='".$site."'"; $result = mysql_query($sql); $total = mysql_num_rows($result); for ($i = 0;$i<$total;$i++) { $obj = mysql_fetch_object($result); $array[$obj->dept_num] = $obj->dept_name; } echo json_encode($array); ?>

___FCKpd___8

___FCKpd___9