日期:2014-05-16  浏览次数:20641 次

非 ajax级联下拉框
  1. 以总公司, 分公司为例???
  2. 1.首先定义一个javascript对象?用于存储你要级联的那些数据???
    function subCompany(parentID, companyID, name) {   
        this.parentID = parentID; //总公司ID   
        this.companyID = companyID; //分公司ID  下拉框的value   
        this.name = name;           //分公司名   下拉框的text   
    }
    ?
    ???
  3. ??
  4. 2.然后定义一个javascript?数组来存放上面的对象??
    var subCompanys = new Array();  
    ?
  5. 3.接下来要将你从后台传来的数据?放到数组里 ??
  6. 我这里是用jstl?+ el
    这段代码要写在js标签里
    <c:forEach var="subCompany"  items="${formCommand.subCompanyCollection}">   
               subCompanys.push(new subCompany(
                      "<c:out  value="${subCompany.parentID}"/>", 
                      "<c:out value="${subCompany.sid}" />",
                      "<c:out value="${subCompany.name}" />"));   
    </c:forEach> 
    ?
    ?
  7. ?
  8. 4. 再接下来 是当 总公司下拉框值变化时 触发的事件??
    function companyChangeEdit(obj) {
        var parentID = obj.value;
        var subCompanySelect = obj.form.subCompany;// 显示分公司的下拉框
    
       subCompanySelect .options.length = 1;
        for(var i=0; i < subCompanys.length; i++){
            var subCompanyObj = subCompanys[i];
            if(subCompanyObj.parentID == parentID){
                var oTempOption = document.createElement("option");
                oTempOption.text = subCompanyObj.name;
                oTempOption.value = subCompanyObj.companyID;
                subCompanySelect .options[subCompanySelect .options.length] 
                                    = oTempOption;
            }
        }
    
       if(obj.form.parentCompany.selectedIndex == 0){ 
           obj.form.subCompanySelect .selectedIndex = 0;
    		
        }
    }
    ?
    ??
  9. 还有两个下拉框
    总公司的
    <select  name="parentCompany"
                    onChange="companyChangeEdit(this);">
         <option value="-1">
           请选择总公司 </option>
         <c:forEach var="company"
              items="${formCommand.companyCollection}">
               <option value="<c:out value="${company.sid}" />"
               <c:if test="${company.sid == formCommand.companyId}">selected</c:if>>
                <c:out value="${company.name}" />
               </option>
          </c:forEach>
    </select>
    
    ???
    分公司的
    <select  name="subCompany">
    
         <option value="-1">
         请选择子公司
         </option>
         <c:forEach var="subCompany"
                  items="${formCommand.currentSubCompanyCollection}">
                 <option value="<c:out value="${subCompany.sid}" />"
                 <c:if test="${subCompany.sid == formCommand.subCompanyID}">selected</c:if>>
                 <c:out value="${subCompany.name}" />
                 </option>
         </c:forEach>			
    </select>
    ?

?嗯? 就这些了 总的思想是把所有数据加载到页面上先, 然后在由javascript 来负责显示

没有用ajax? 项目要求(经理的)

?

还有一种方法是?隐藏的iframe 我没有那么作?因为还要写个页面 我觉得不爽
希望大家有什么好方法拿出来讨论啊? 我就会这么多 还是个菜鸟啊?

?