例：实现省市县的三级联动！我运行就只有第一个Select里面有值，后面的都不出现联动，请问大侠们怎么修改代码才能出现联动呀！
index.jsp
<select name="city1" id="city1" onChange="changepro('city2','city1');">
<option value="" selected>省/直辖市</option>
<option value='北京市'>北京市</option>
<option value='天津市'>天津市</option>
..........
</select></td>
<td><select name="city2" id="city2" onChange="changecity('city3','city2');">
<option value="">请选择</option>
</select></td>
<td><select name="city3" id="city3">
<option value="">请选择</option>
</select>
selectarea.js
var lmcount;
var lmcount2;
lm=new Array();
lm2=new Array();
lm[0]=new Array("北京辖区","北京市");
lm[1]=new Array("北京辖县","北京市");
lm[2]=new Array("天津辖区","天津市");
lm[3]=new Array("天津辖县","天津市");
........
lmcount=345;//全国市的数目
lmcount2=3144;//全国县的数目
//定义函数：用于联动省 和 市 两级-----city为市级下拉框的id名，pro为省下拉框的id 号。 用法：onChange="changepro('省id名','市id名');"///////////////////
function changepro(city,pro)
{
var city=city;
var pro=document.getElementById(pro).value;
var i;
document.getElementById(city).length=1;
for (i=0;i<lmcount;i++){
if (lm[i][1]==pro){
document.getElementById(city).options[document.getElementById(city).length]=new Option(lm[i][0], lm[i][0]);
}
}
}
//定义函数：用于联动市 和 县 两级-----county 为县级下拉框的id名，city为市下拉框的id 号。 用法：onChange="changecity('市id名','县id名');"///////////////////
function changecity(county,city)
{
var county=county;
var city=document.getElementById(city).value;
var j;
document.getElementById(county).length=1;
for (j=0;j<lmcount2;j++){
if (lm2[j][1]==city){
document.getElementById(county).options[document.getElementById(county).length]=new Option(lm2[j][0], lm2[j][0]);
}
}
}
// JavaScript Document
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>列表框中事件应用</title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> </script> <script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script> <style type="text/css"> body{font-size:13px} .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px} .clsTip{padding-top:5px;background-color:#eee;display:none} .btn {border:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> <script type="text/javascript"> $(function() { function objInit(obj) {//下拉列表框初始化 return $(obj).html("<option>请选择</option>"); } var arrData = { //定义一个数组保存相关数据 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" }, 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" }, 厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" } }; $.each(arrData, function(pF) { //遍历数据增加厂商项 $("#selF").append("<option>" + pF + "</option>"); }); $("#selF").change(function() { //厂商列表框选项改变事件 objInit("#selT"); objInit("#selC"); $.each(arrData, function(pF, pS) { if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配 $.each(pS, function(pT, pC) { //遍历数据增加品牌项 $("#selT").append("<option>" + pT + "</option>"); }); $("#selT").change(function() { //品牌列表框选项改变事件 objInit("#selC"); $.each(pS, function(pT, pC) { if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配 $.each(pC.split(","), function() { //遍历数据增加型号项 $("#selC").append("<option>" + this + "</option>"); }); } }); }); } }); }); $("#Button1").click(function() { //注册按钮单击事件 var strValue = "您选择的厂商:"; strValue += $("#selF option:selected").text(); strValue += " 您选择的品牌:"; strValue += $("#selT option:selected").text(); strValue += " 您选择的型号:"; strValue += $("#selC option:selected").text(); $("#divTip") .show() .addClass("clsTip") .html(strValue); //显示提示信息并增加样式 }); }) </script> </head><body> <div class="clsInit"> 厂商：<select id="selF"><option>请选择</option></select> 品牌：<select id="selT"><option>请选择</option></select> 型号：<select id="selC"><option>请选择</option></select> <input id="Button1" type="button" value="查询" class="btn" /> </div> <div class="clsInit" id="divTip"></div></body></html>