那些几级联动的问题。

今天 让我干一件事 说是 根据年份 选择不同 另一个 下拉框中出现的值 不同。。。其实 就是很简单的表单联动的例子。。只是  由于 当时极度 不制动 怎么跟 年份 关联起来。。苦苦 寻找。。最后 发现 这个 年份了。。一切 就豁然 开朗了。。因为 也不用多高多少。。只是 原来的 固定的 当前年 变成 灵活的。。然后 实现 另一下拉框中的 值不同。。归根结底 原来 是想 让我 弄个表单  联动。。

 正好 趁此机会，也从网上 耐心 再看一下 这写 ＪＳ　代码。。

 

一个　比较　不错的　：

 

先建立一个表单，给每个select元素一个ID以方便JS引用相应节点：

<form action="" method="get">
    <select name="province" id="province">
        <option value="省份" selected="selected">省份</option>
    </select>
    <select name="city" id="city">
        <option value="城市" selected="selected">城市</option>
    </select>
    <select name="district" id="district">
        <option value="县区" selected="selected">县区</option>
    </select>
</form>

再看JS代码部分：

<script type="text/javascript">
var province = document.getElementById('province');
var city = document.getElementById('city');
var district = document.getElementById('district');
//省份
var provinceArr = ['浙江', '江西', '内蒙古'];
//市县,每个数组第一个元素为省份,其他的为这个省份下的市县
var cityArr = [];
cityArr[0] = ['浙江', '宁波', '杭州', '龙游']; //要写数字索引
cityArr[1] = ['江西', '南昌', '九江'];
cityArr[2] = ['内蒙古', '乌兰浩特'];
//区镇,数组类似市县
var districtArr = [];
districtArr[0] = ['宁波', '江东', '北仑', '海曙'];
districtArr[1] = ['南昌', '湾里', '昌北'];
districtArr[2] = ['龙游', '塔石镇', '湖镇镇','溪口镇'];
//生成省份
for(var key in provinceArr) {
    var provinceOption = document.createElement('option');
    provinceOption.value = provinceOption.text = provinceArr[key];
    //向省份的select里增加provinceArr<option>省份名</option>
    province.options.add(provinceOption);
}
//生成市县、区镇
//@current为当前选择的select节点，即父类节点
//@child为子类点
//@childArr为子节点数组
function showChild(current, child, childArr) {
    var currentValue = current.value;
    var count = childArr.length;
    //每次切换时,把城市的子option长度设置为1,即清除城市的选择,DOM对象select元素是长度是子option的个数
    child.length = 1;
    //切换省份时,把县区长度也设置为1
    district.length = 1;
    for(var i = 0; i < count; i++) {
        //判断所选的值即父类，与当前节点第一个数组元素是否相等
        if(currentValue == childArr[i][0]) {
            //不取第一个数组元素,因为第一个是父类，所以j从1开始，而不是0
            for(var j = 1; j < childArr[i].length; j++) {
                var childOption = document.createElement('option');
                //ie不支持option对象的value,所以加childOption.text
                childOption.value = childOption.text = childArr[i][j];
                child.options.add(childOption);
            }
        }
    }
}
//省份改变时
province.onchange = function() {
    showChild(province, city, cityArr);
}
//市县改变时
city.onchange = function() {
    showChild(city, district, districtArr);
}
</script>

定义三个数组(省份一维,县市和区镇二维)，第一个是省份的，第二个是县市的，第三个是区镇的，这段代码二级三级的第一个数组元素为父类元素，其实父素元素也不一定要放在第一个数组元素的位置，因为showChild函数中childArr [i][0]采用的是比较第一个数组元素即父类与所选的是否一致），当然放在第一个位置不仅使代码更容易阅读而且让下面的循环变得简洁，另外数组索引并不需要相对应，只需一行数组其中一个元素是父类，其余是这个父类的子类就可以了。请看图解：

每当select表单发生选择时，会调用相应节点的onchange事件，使用自定义函数showChild传入不同的参数，第一层循环找到select选中的值所在的那行数组，第二层循环使这行数组除父类数组元素以外的数组元素都填加到子类的select中，如此便实现了三级联动。

 

 

 

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

另一个　内部人员　写好的方法。。我就　重复利用了了。。。

 

ｆｏｒｍ　　部分：：

<td>
      年份&nbsp;&nbsp;<select class="required" name="setId" id="setId" value="${dailyForm.setId}" οnchange="changeParentNo(this.value)">
                     <option value="${dailyForm.setId}">${dailyForm.setId}</option>
                     <option value="${dailyForm.setId+1}">${dailyForm.setId+1}</option>
                     <option value="${dailyForm.setId+2}">${dailyForm.setId+2}</option>
                     </select>
       
       <br>
      </td>
      <td>
          年度母项目&nbsp;
       <select class="required" name="parentNo" id="parentNo"
        value1="${dailyForm.parentName}" style="WIDTH: 150px;" />
        <c:if test="${dailyForm.status eq 1 or dailyForm.status eq 2}">
         <option selected="selected">
          ${dailyForm.parentName}
         </option>
        </c:if>
       </select>

 

 

ｊｓ部分：

<script type="text/javascript">
  function changeParentNo(setId){
 // alert(11111);
 // alert(setId);
   var url=contextPath+"/dailyItemPost.do?method=getParentProj2&random="+ Math.random(100)+"&setId="+setId;
   var data=new Object();
      // data.setId=setId;
       data.bzbm=jQuery("#bzCode").val();
          data.zrbm=jQuery("#zrCode").val();
    data.dprojCode=jQuery("#dprojCode").val();
       jQuery.getJSON(url,data ,changeToSelect);
  }
  var parentProjCode="${dailyForm.parentNo}";//记录母项目值，以便更新时候可以保持选中
   function changeToSelect(data){　／／其中　这个　ｄａｔａ　记录了　下拉框的值。。一串者。。。
   //清空母项目

   var pNo=jQuery("#parentNo");
   parentProjCode=jQuery("#parentNo").val();
      pNo.empty();
      pNo.append('<option value="" title=""></option>');
      if(data.length>0){
      var mgp=jQuery('<optgroup label="'+data[0]+'">');
      jQuery.each(data[1],function(i,obj){　／／用这个　　ｅａｃｈ　遍历。。
      //mgp.append('<option value="'+obj.projectCode+'">'+obj.projectName+'</option>');
      mgp.append('<option value="'+obj[0]+'" title="'+obj[1]+'">'+obj[1]+'</option>');
      });
      pNo.append(mgp);
     }
     if(data.length>2){
     var cgp=jQuery('<optgroup label="'+data[2]+'">');
     jQuery.each(data[3],function(i,obj){
     cgp.append('<option value="'+obj.projectCode+'" title="'+obj.projectName+'">'+obj.projectName+'</option>');
     });
     pNo.append(cgp);
     }
       setTimeout(function() {
        pNo.val(parentProjCode);
      }, 1);
    
                   selectWidth();  　／／设置下拉框　宽度。。
       }
       function selectWidth(){
          var option = document.getElementById("parentNo");
       var maxlength =0;
       for(var i=0;i<option.length;i++){
           var text = option[i].text;
        if(text.length>maxlength){
           maxlength = text.length;
        }
      }
      if(option.length >=1){
       var ME123 = maxlength*13;
       if(ME123<150){
        option.style.width = "150px";
       }else{
        option.style.width = ME123+"px";
       }
      }
   }
  </script>

 

再附上一点　ａｃｔｉｏｎ里的。。主要是那个请求路径里的方法。。。这个ｊｑｕｅｒｙ．ｇｅｔＪｓｏｎ（）

 

 

public ActionForward getParentProj2(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  String zrbm = request.getParameter("zrbm");
  System.out.println("zrbm=====：  "+zrbm);
  String setId =request.getParameter("setId");
  System.out.println("setId+++==== : "+setId);
  List<BBudgetControl> pYearBudget = dailyItemService.getYearParentProj2(zrbm,setId);
  PrintWriter pw = response.getWriter();
  JSONArray json = new JSONArray();

  if (!COMMON.isEmpty(pYearBudget)) {
   json.add("---年度母项目---");
   json.add(pYearBudget);
  }
  pw.write(json.toString());
  pw.flush();
  pw.close();
  return null;

 }

 

 

差不多了。。。。

 

其实　这个　方法　还是　　比较好的。。因为　　那些　下拉框的值　都是从　数据库里　动态获得的。。。。而　　第一种　所有的　值　都写　页面里。。。

 

ｐｓ．．