Link to home
Start Free TrialLog in
Avatar of alex4544
alex4544

asked on

Dynamic Hyperlink Drop Down boxes

Hi,

Im looking to create a php/html page with two drop down boxes and a selection button

What I want is the selection options in the second drop down box to change depending on what the first drop down box is selected on, the first drop down only having 2 options A/B

Once the selection is choosen I want each of the choices in the second box to have a hyperlink value so that when the Selection Button "Next" is choosen it will have a dynamic URL based on the two drop down boxes

I have seen some code for the drop down boxes that gives an alert dependant on the choices but I want the choices to have a hyperlink instead.

Here is the code I found for dynamic drop downs
http://www.felgall.com/jstip22.htm
Avatar of Albert Van Halen
Albert Van Halen
Flag of Netherlands image

Just specify the url of each option as the value like "<option value="https://www.experts-exchange.com">Experts Exchange</option>
Avatar of alex4544
alex4544

ASKER

Will doing that work with the JS I linked to?
Just modify the js like the following:
function setOptions(chosen) {
    var selbox = document.myform.opttwo;
 
    selbox.options.length = 0;
    if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
    }
 
    if (chosen == "1") {
        selbox.options[selbox.options.length] = new Option('Experts Exchange','http://www.experts-exchange.com');
        selbox.options[selbox.options.length] = new Option('Google','http://www.google.com');
    }
}

Open in new window

For example the folling HTML

 <form name="myform"><div align="center">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">A</option>
<option value="2">B</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
</div></form>

with the following JS
 function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select Nurse or Doctor first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
}

So where would I then specify the URL as the JS in the second part contains content for an alert which Im not certain how to change
ASKER CERTIFIED SOLUTION
Avatar of Albert Van Halen
Albert Van Halen
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Excellent, thank you I understand how it works now
Just as an additional

For a new window using onclick="window.open
but when using onclick="window.location  - for no new window it does not appear to work - any idea?
Sorry should of been
onclick="window.location.href