javascript - JSP 下拉列表有 3 个相互链接的选项

Question

我是jsp的新手。我正在处理下拉菜单。这里的问题是 - 将有一个 3 下拉菜单作为“choice1、choice2 和choice3”。最初“choice1”有 3 个选项。“choice2 和choice3”将是无。根据“choice1”下拉列表选择的选项，“choice 2”需要通过一些 2 个选项来触发。并且根据“choice2”下拉列表中选择的选项，“choice 3”需要通过一些 2 个选项来触发。我该如何实现这一点。带有示例代码的解决方案会很好。

Answer 1

使用 AJAX 你做同样的事情

有关示例，请参见以下链接：

http://jsfprimefacesblog.blogspot.in/2006/02/ajax-jsp-to-populate-dependent-dropdown.html

http://stackoverflow.com/questions/8643096/jsp-ajax-populate-drop-down-list-based-on-the-selected-value

http://www.roseindia.net/answers/viewqa/Ajax/15250-DropDown-in-ajax+jsp.html

Answer 2

    var xmlHttp;
    function getPort(){
        var companyId= document.formName.companyId.value;
        var str= document.formname.team.options[document.formname.team.selectedIndex].value;
        var userId = document.formname.userId.value;
        if (str=="all"){
            for (var i = 1; i < document.formname.team.options.length ; i++) {
                document.formname.team.options[i].selected = true;
            }
            document.formname.team.options[0].selected = false;
        }
        var opt = document.formname.team;
        var TeamValue = new Array;
        var j = 0;
        for (i=0; i<document.formname.team.length; i++){
            if (opt[i].selected == true){  
               TeamValue[j] = "'"+opt[i].value+"'";  
               //TeamValue[j] = opt[i].value;
               j++;  
            }
        }
        TeamValue = TeamValue.join(",");
        //alert(TeamValue);
        if (typeof XMLHttpRequest != "undefined"){
              xmlHttp= new XMLHttpRequest();
        }else if (window.ActiveXObject){
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlHttp==null){
            //alert("Browser does not support XMLHTTP Request")
            return;
        } 
        var url="GetPortList.jsp?teamId="+TeamValue+"&companyId="+companyId+"&userId="+userId;
        //alert(url);
        xmlHttp.onreadystatechange = changeValue;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function changeValue(){
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
            result = xmlHttp.responseText;
            //alert(result);
            document.getElementById("portnum").innerHTML="<select name='collectorCode' size='4' style='width:155px;><option value='select'>Select All</option>"+result+"</select>";   
        }
    }

使用html代码...

<html:select  style="width:155px;" property="team" value="" onchange="getPort()" />

上面的 ajax 代码修改了下面复选框的值并将其放在一个 div 标签中，比如......

<div id="portnum">
<html:select property="collectorCode" value=""  style="width:155px;">
</div>

它适用于 2 个复选框...根据第一个复选框选择的值更改了第二个复选框值