CODEWITHSUNDEEP
javascriptjsp
user1791618
user1791618

Reputation: 173

JSP drop down list with 3 choices linked to each other

i am new to jsp. i am working on drop down menu. here the problem is - there will be a 3 dropdown menu as "choice1, choice2, and choice3". Initially "choice1" has 3 options. "choice2 and choice3" will be none. Based on the choice selected by the "choice1" dropdown list, "choice 2" needs to be triggered with some 2 options. And based on the choice selected by the "choice2" dropdown list, "choice 3" needs to be triggered with some 2 options. How can i implement this. Solution with sample code would be fine.

Upvotes: 1

Views: 2399

Answers (2)

R D
R D

Reputation: 1332

using AJAX you do the same

See the following links for examples :

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

Upvotes: 2

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

    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>";   
        }
    }

using the html code...

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

above ajax code modifies the values of below checkbox and place it in a div tag like...

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

It is for 2 checkboxes... 2nd checkbox values changed based on 1st checkbox selected value

Upvotes: 1

Related Questions