Loading
View RSS Feed

chikoo

JSP File To Implement Dynamic Dropdown

Rating: 3 votes, 5.00 average.
Most of the times in dynamic websites, we see many drop down items are dependent on other. Like if we select ,a Country name (Let's suppose XYZ) from a drop down menu of Country. Then in the other drop down menu of State, will reflect the state names of that selected country (here it is XYZ).
So the below code will give you a brief look so that you could implement it. If any issues, kindly comment.

Click image for larger version. 

Name:	JSP Screenshot.jpg 
Views:	1107 
Size:	16.7 KB 
ID:	1055

Code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring MVC</title>

<script type="text/javascript">   

function generateDropList(ddl1,ddl2,text1)
{    
    var fruit = new Array('mango','apple','orange');
    var veg = new Array('capsicum','carrot','potato'); 
    var dal = new Array('chana','rajma','gram'); 
    var i;
    text1.value="";
    switch (ddl1.value) {           

    case 'fruits':     
        
        ddl2.options.length = 1;  
        for (i = 0; i < fruit.length; i++) {              
            createOption(ddl2, fruit[i], fruit[i]); 
        }    
        break;     
    case 'vegetables':       
        
        ddl2.options.length = 1;  
        for (i = 0; i < veg.length; i++) {          
            createOption(ddl2, veg[i], veg[i]);
            }
        break;         
    case 'dal':  
        
        ddl2.options.length = 1;  
        for (i = 0; i < dal.length; i++) {    
            createOption(ddl2, dal[i], dal[i]);
            }  
        break;               
    default:          
        ddl2.options.length = 1; 
        break;   
    }     
} 
function createOption(ddl, text, value)
{   
    var opt = document.createElement('option');  
    opt.value = value;      
    opt.text = text;    
    ddl.options.add(opt);  
    return
}
function generateTextBox(ddl1,ddl2,text1)
{
    if(ddl2.value=='mango'|| ddl2.value=='capsicum'||ddl2.value=='chana')            

        text1.value="Nice"; 
    
    else if(ddl2.value=='apple'|| ddl2.value=='carrot'||ddl2.value=='rajma')
            
        text1.value="Good";  
            
    else if(ddl2.value=='orange'|| ddl2.value=='potato'||ddl2.value=='gram')
        
        text1.value="Excellent";  
    else
        text1.value="";
}
</script>
 
</head>
<body>

<%
String[] arr={"fruits","vegetables","dal"};
%>
<br><br>
Select choice:
<select id="ddl1" onchange="generateDropList(this,ddl2,text1)">
<option selected="selected">Select one:</option>
<%
    int i;
    for(i=0;i<arr.length;i++)
    {  
%>
    <option value="<%=arr[i]%>"><%=arr[i]%></option>
    <%} %>
</select>

<br><br>
Select any one:

<select id="ddl2" onchange="generateTextBox(ddl1,this,text1)">
<option selected="selected">Select one:</option>
</select>
<br><br>
Your choice is :<input name="text1" readonly="readonly">

</body>
</html>

Submit "JSP File To Implement  Dynamic Dropdown" to Digg Submit "JSP File To Implement  Dynamic Dropdown" to del.icio.us Submit "JSP File To Implement  Dynamic Dropdown" to StumbleUpon Submit "JSP File To Implement  Dynamic Dropdown" to Google

Categories
Java

Comments




Disclaimer: Users of techforum4u.com are responsible for ensuring that any material they post (article, blog posts, images or other mulitimedia content) does not violate or infringe upon the copyright, patent, trademark, or any personal or proprietary rights of any third party, and is posted with the permission of the owner of such rights.Anyone who violates these rules may have their access privileges removed without warning.