html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表（select）

目标

 

需要的是在选择第一个select下拉列表后，将选择的内容传送到PHP页面。在PHP页面中通过查询数库，得到第二个select需要显示的option的值，并在select中显示。

方案

 

 

1  利用ajax上传数据到PHP，由于利用了smarty模板技术，可以直接给模板中的变量赋值，这样就可以不用通过ajax接收返回值再经过处理输出了。

由于这个PHP页面没有包含在其他PHP页面里，是独立的。这样就造成无法赋值。

2  通过ajax接收返回值，这里的返回值就是以上数据库查询的结果。

    通过json_encode()将其转化为json格式，然后输出。

    js中将responseText字符串转化为json格式——JSON.parse()函数实现。

    遍历数组，并添加option给select。

本次使用的是方案2

 

部分代码

JS代码：

function get_value(form){
	var scid=sub_class.value;//运算类型号

//---------------------------------------
//使用ajax发送选中的运算类
	var url = "query_subject.php?scid="+scid;
	xmlhttp.onreadystatechange = Content;
//	var url = "query_subject.php?";
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
//---------------------------------------
	function Content(){
		if(xmlhttp.readyState==4){
			if(xmlhttp.status==200){
				var sel=document.getElementById("sub_name");
				var rst=JSON.parse(xmlhttp.responseText);//将字符串转化为数组
				for(var i=0; i<rst.length; i++){
					var opt=document.createElement('option');
					opt.value=rst[i].sid;
					opt.text=rst[i].s_name;
					try
    				{
   	 				sel.add(opt,null); // standards compliant
    				}
  					catch(ex)
    				{
    					sel.add(opt); // IE only
    				}
				}
			}
			else{
				alert("你请求的页面错误");
			}
		}
	}
	
}

PHP代码：

?php
header ( "Content-type: text/html; charset=UTF-8" ); 	//设置文件编码格式
require_once("system/system.inc.php");  						//包含配置文件
$scid=$_GET['scid'];
$rst=null;
if($scid){
	$sql="select sid, s_name 
	      from subject
	      where scid='$scid'";
	$rst=$admindb->ExecSQL($sql, $conn);
}
echo(json_encode($rst));
?>