javascript - 3 つの選択肢が相互にリンクされた JSP ドロップダウン リスト

Question

私はjspが初めてです。私はドロップダウンメニューに取り組んでいます。ここで問題があります - 「choice1、choice2、choice3」という 3 つのドロップダウン メニューがあります。最初の「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つのチェックボックス用です... 2番目のチェックボックスの値は、1番目のチェックボックスの選択値に基づいて変更されました