Ajax实现二级联动

最新推荐文章于 2021-08-05 17:01:23 发布

原创最新推荐文章于 2021-08-05 17:01:23 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #callback #struts #string

本文介绍了一种使用JavaScript实现动态加载下拉菜单的技术，通过改变父级元素的值来获取子级元素的相关数据，并将其动态填充到下拉菜单中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<SCRIPT type="text/javascript">   
        var req;   
        window.onload=function(){   
        }   
           
        function Change_Select(url, parentInputId, childInputId)   
        {   
            var parentInputValue = document.getElementById(parentInputId).value;   
            var showUrl = url + "&parentInputId="+ parentInputId + "&parentInputValue=" + parentInputValue;   
            //alert(showUrl);   
            showUrl=encodeURI(showUrl);    
            //alert(showUrl);   
            showUrl=encodeURI(showUrl);   
            //alert(showUrl);   
            if(window.XMLHttpRequest)   
            {   
                req=new XMLHttpRequest();   
            }else if(window.ActiveXObject)   
            {   
                req=new ActiveXObject("Microsoft.XMLHTTP");   
            }   
               
            if(req)   
            {   
                req.open("GET",showUrl,true);   
                req.onreadystatechange= function() {   
                    callback(childInputId);   
                }   
                req.send(null);   
            }   
        }   
           
        function callback(childInputId)   
        {   
            if(req.readyState == 4)   
            {   
                if(req.status == 200)   
                {   
                    parseMessage(childInputId);   
                }else{   
                    // Not able to retrieve descriptionInvalid URI: isHexDigit   
                    alert("Not able to retrieve description"+req.statusText);   
                }   
            }   
        }   
           
        function parseMessage(childInputId)   
        {   
            //alert();   
            var xmlDoc=req.responseXML.documentElement;   
            if(xmlDoc == 'null') {   
                alert("xmlDoc="+xmlDoc);   
            }   
            var xSel=xmlDoc.getElementsByTagName('select');   
            var select_child=document.getElementById(childInputId);   
            var select_child_length = select_child.options.length;   
            for(var i = select_child_length-1; i >= 0; i--){   
                select_child.remove(i);   
            }   
               
            //alert("xSel.length="+xSel.length);   
            for(var i=0;i<xSel.length;i++)   
            {   
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;   
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;   
                var option=new Option(xText,xValue);   
                try{   
                    select_child.options.add(option);   
                }catch(e){   
                }   
            }   
               
               
        }   
</SCRIPT>

<select id="parentId" onChange="Change_Select('seriesTextboxAction.do', 'parentId', 'childId')">   
    <option value="">- Select One -</option>   
    <option value="111">111</option>   
    <option value="222">222</option>   
</select>   
  
<select id="childId">   
    <option value="">- Select One -</option>   
</select>

List<DropTo> dropList = Data List(from DB or other file);   
int childListSize = dropList.size();   
                                                                response.setContentType("text/xml");                                response.setHeader("Cache-Control","no-cache");   
  
StringBuffer buffer = new StringBuffer();   
buffer.append("<selects>");   
                                                                if(childListSize > 0) {   
    for(int i = 0; i < childListSize; i ++) {   
        DropTo dropFromDB = dropList.get(i);   
        String showKey = dropFromDB.getShowKey();     
        String showValue = dropFromDB.getHiddenValue();   
        System.out.println("showKey="+showKey+"  showValue="+showValue);   
        buffer.append("<select><value>").append(showKey).append("</value>");   
        buffer.append("<text>").append(showValue).append("</text></select>");   
    }   
    buffer.append("</selects>");   
    response.getWriter().write(buffer.toString());   
    response.getWriter().flush();   
response.getWriter().close();                                  
}

Struts：

<action name="seriesTextboxAction" class="xxxx.SeriesTextboxAction">   
    <result name="success"></result>   
</action>