JS实现三级连动
?
?
<td> <div otitle="常住城市" id="shen" onchange="changeProvince();" > <option value="" otitle="常住城市"> 请选择省份 </option> </select> <select name="city" id="shi" onchange="getPreminuByCity();"otitle="常住城市"> <option value="" otitle="常住城市"> 请选择城市 </option> </select> </div> </td> </tr> <tr> <th valign="top"> 选择金额 </th> <td> <div id="preminuId" <option value="" otitle="金额"> 请选择 </option> </select> </div> </td> </tr>
?
?
?
var provinceInfos = new Array();//二维数组var provinceInfos2 = new Array();//三维数组var i = 0;var j = 0;var k = 0;/***********************************************初始化数组*********************************************************/<c:forEach var="provinceInfo" items="${provinceInfos}"> document.getElementById("shen")[i+1] = new Option('<c:out value="${provinceInfo.name}"/>'); document.getElementById("shen")[i+1].value = '<c:out value="${provinceInfo.code}"/>'; document.getElementById("shen")[i+1].id = i; provinceInfos[i] = new Array(); provinceInfos2[i] = new Array(); j = 0; <c:forEach var="cityInfo" items="${provinceInfo.citys}"> provinceInfos[i][j] = '<c:out value="${cityInfo.name}"/>' +":"+'<c:out value="${cityInfo.code}"/>'; provinceInfos2[i][j] = new Array(); k = 0; <c:forEach var="premiumInfo" items="${cityInfo.premium}"> provinceInfos2[i][j][k] = '<c:out value="${premiumInfo}"/>'; k = k + 1; </c:forEach> j = j + 1; </c:forEach> i = i + 1;</c:forEach> //改变省份触发function changeProvince(){ //一进来就还原.. document.getElementById("shi").options.length = 1; //var length = document.getElementById("shen").length; var selectValue = document.getElementById("shen").value; if(selectValue!=''){ //第一种方法 /* for(var i = 0; i<length; i++){ if(document.getElementById("shen")[i].value == selectValue){ for(var j=0; j<provinceInfos[i-1].length; j++){ var cityInfo = provinceInfos[i-1][j].split(':'); document.getElementById("shi")[j+1] = new Option(cityInfo[0]); document.getElementById("shi")[j+1].value = cityInfo[1]; } break; } }*/ //第二种方法 var selectIndex = document.getElementById("shen").selectedIndex; for(var j=0; j<provinceInfos[selectIndex-1].length; j++){ var cityInfo = provinceInfos[selectIndex-1][j].split(':'); document.getElementById("shi")[j+1] = new Option(cityInfo[0]); document.getElementById("shi")[j+1].value = cityInfo[1]; } //默认选中第一个诚市 document.getElementById("shi")[1].selected = true; } //费用也跟着连动. getPreminuByCity();} //改变城市触发function getPreminuByCity(){ //一进来就还原.. document.getElementById("preminuId").options.length = 1; if(document.getElementById("shi").value != ''){ var provinceIndex = document.getElementById("shen").selectedIndex; var cityIndex = document.getElementById("shi").selectedIndex; for(var i = 0; i<provinceInfos2[provinceIndex-1][cityIndex-1].length; i++){ document.getElementById("preminuId")[i+1] = new Option(provinceInfos2[provinceIndex-1][cityIndex-1][i]); document.getElementById("preminuId")[i+1].value = provinceInfos2[provinceIndex-1][cityIndex-1][i]; } //默认选中第一个 document.getElementById("preminuId")[1].selected = true; } }??
?
?
? 新的:
//改变省份触发function changeProvince(province, cityStr, preminuStr){//一进来就还原城市..var city = document.getElementById(cityStr);city.options.length = 1;//var shenIndex = province.selectedIndex;if(shenIndex > 0) {for(var j=0; j<provinceInfos[shenIndex-1].length; j++){var cityInfo = provinceInfos[shenIndex-1][j].split(':');city[j+1] = new Option(cityInfo[0]);city[j+1].value = cityInfo[1];}//默认选中第一个诚市city[1].selected = true;}//费用也跟着连动.getPreminuByCity(province.id, city, preminuStr);}//改变城市触发function getPreminuByCity(provinceStr, city, preminuStr){ //一进来就还原.. var preminu = document.getElementById(preminuStr); var province = document.getElementById(provinceStr);preminu.options.length = 1;var provinceIndex = province.selectedIndex;var cityIndex = city.selectedIndex;if(provinceIndex > 0 && cityIndex > 0){for(var i = 0; i<provinceInfos2[provinceIndex-1][cityIndex-1].length; i++){var preminuId = provinceInfos2[provinceIndex-1][cityIndex-1][i];preminu[i+1] = new Option(Math.floor(preminuId));preminu[i+1].value = preminuId;}//默认选中第一个preminu[1].selected = true;} }?
?