JS实现三级连动

 

 

          <td>
           <div class="field">
            <select name="province"  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 class="field">
            <select name="preminuId" 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;
	} 
}