需要实现下拉列表动态更新的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,节省网络传输带宽.
___FCKpd___8
___FCKpd___9