How could I open popup window based on two select option

Question

0.00/5 (No votes)

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 10-Feb-20 20:16pm

Member 14602148

Updated 11-Feb-20 2:27am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

W∴ Balboos, *GHB* · Answer 1 · 2020-02-11T02:28:00

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.

Posted 11-Feb-20 2:28am

W∴ Balboos, GHB

Comments

Member 14602148 11-Feb-20 23:28pm

Can you show me one sample?

W∴ Balboos, GHB 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.
}