Click here to Skip to main content
14,449,906 members
Rate this:
Please Sign up or sign in to vote.
See more:
I want to design the following scenario usinh HTML,CSS and Java script: I have created one drop down menu where you should select city [ex. Chandigarh], when you will select city the corresponding algorithms will come with a drop down menu [ex. PSO,GA,BBO].If i select PSO then another popup window will open and there will be another dropdown menu with list of years [ex. 2030,2035,2040]. How could I design the following scenario?


What I have tried:

I am able to do to open popup window using one select option.i have added the code[i have added the dummy url to open another popup window]. But for multiple select option i need help.
<pre><pre lang="HTML">

<pre><html>
<head>
<title>Pop URL on Select</title>
 <script language="JavaScript" type="text/javascript">
function openPop(){
var Sel_Ind = document.getElementById('myURLs').selectedIndex;
var popUrl = document.getElementById('myURLs').options[Sel_Ind].value;
winpops=window.open(popUrl,"","width=600,height=600,resizable,")
}

</script>
</head>
<body>
<select id="myURLs" onChange="javascript:openPop();">
<option value="">Select a page...</option>
<option value="http://news.bbc.co.uk">PSO</option>
<option value="http://www.the-company.com">GA</option>
<option value="http://www.b3ta.com">BBO</option>
<option value="http://www.google.com">DE</option>
<option value="http://www.sitepoint.com/forums">Help</option>
</select>
</body>
</html>
Posted
Updated 11-Feb-20 3:27am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

One solution, a generally applicable one, is to use nested switch() statements to determine what happens when either (or both) of your drop-downs is changed.

Other options exist but this is comparatively simple, conceptually.
   
Comments
Member 14602148 11-Feb-20 23:28pm
   
Can you show me one sample?
W Balboos 13-Feb-20 7:54am
   
Each of your list has an onchange='someFunction()" event and its own ID (lets call them id='s1' and id='s2' .

When either is changed it goes to you someFunction() script.
Inside the script it tests the value from both

function someFunction () {
var test1 = document.getElementById('s1').value;
var test2 = document.getElementById('s2').value;

switch(test1) {
default: return a value when no s1 selection;
case a-possible-test1-value:
switch(test2) {
default: return a value when no s2 selection
cases that handle combinations of tes1 and test2
}
break;
case another-possible-test1-value:
switch(test2) {
default: return a value when no s2 selection
cases that handle combinations of this test1 and test2
}
break;
case etc etc etc
} // end of switch(test1)

You need to handle the various possibilites - including if either has no selection. How you pick your values is up to you.
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100