使用jQuery制作级联下拉列表框

阅读更多

一 代码

fun.js

// JavaScript Document
$(document).ready(
	function(){
		$.get("returnpc.php?flag=p", null, function(data){     //向服务器发送GET请求，获取省份的值，并将结果追加到省份下拉列表中
		    $("#p").append(data);							 
		});
		$("#c").css("display","none");     //初始状态使城市下拉列表不可见
		$("#p").change(function(){     //为省份下拉列表增加改变事件
		    if($("#p").val()==""){		 //在没选择省份的情况下，使城市下拉列表不可见
			    $("#c").css("display","none");     
			}else{
		        $.get("returnpc.php?flag=c&p="+$("#p").val(), null, function(data){     //如果选择了某省份，则向服务器发送GET请求，使用回调函数为城市下拉列表赋值，并使城市下拉列表可见
			        $("#c").css("display","");
					$("#c").empty();															  
			        $("#c").append(data);      //将数据追加到城市下拉列表     									  
			    });  
		     }
		});
    }		
);

 

index.php

    -请选择地区-

 

pc.php

 

returnpc.php

".iconv('gbk','utf-8',$p[$i])."";    
    }  
    echo $str;     //输出要返回的参数
}else{
    $index = array_search($_GET['p'], $p);     //提取所选择省份的在省份数组中对应的键值
    for($j=0; $j".iconv('gbk','utf-8',$c[$index][$j])."";
	}
	echo $str;       //输出要返回的参数
}
?>

 

二 运行结果

 

• 
• 大小: 3.5 KB

• 查看图片附件