Choose onclick change url option or change div

Question

So what I'm trying to do is that at the moment when I select the first option to show the div, if I choose option 2 to redirect me to another URL. I don’t even know if this is possible! Sample:

<select class="required" id="thechoices"> <option value="">Service Type</option> <option value="box1">From LAX Airport</option> <option VALUE="http://www.dma.org/linuxsig/">To The Airport</option> </select> <div id="box1"><p>Box 1 stuff...</p></div> 

Answer 1

 <select id="options" onchange="optionCheck()"> <option></option> <option value="show">Show Div</option> <option value="goto">Go To Google</option> </select> <div id="hiddenDiv" style="height:100px;width:300px;border:1px;visibility:hidden;"> I am visible now!</div> <script type="text/javascript"> function optionCheck(){ var option = document.getElementById("options").value; if(option == "show"){ document.getElementById("hiddenDiv").style.visibility ="visible"; } if(option == "goto"){ window.location = "http://google.com"; } } </script> 

You can make it a lot prettier with jquery, but that should work.

Answer 2

Yes maybe

Add the onchange event handler to your selection.

 <select class="required" id="thechoices" onchange="return airportChoice(this)"> 

Set the display of the window identifier that you want to hide in order to hide.

  #box1{display:none} //css 

Here is a generic function that returns an argument based on a link. Based on your question, so that you can easily have many options from the airport, simply add below each of your options if you need more options.

  onchange="return airportChoice(this)" 

Js function

 function airportChoice(n){ if(n.selectedIndex === 1){ // show a div (id) // alert(n.value); document.getElementById(n.value).style.display = "block"; }else if(n.selectedIndex === 2){ location.href= n.value; // redirect the user to the url } // this last one is not what you ask but for completeness // hide the box div if the first option is selected again else if (n.selectedIndex == 0){ // alert(n[1].value); document.getElementById(n[1].value).style.display = "none"; } }