CODEWITHSUNDEEP
javascripturlhtmlonclickonchange
ciprian
ciprian

Reputation: 443

select option onclick change url or change div

So what i am trying to do is that in the moment i pick first option, to show a div, if i pick option 2 to redirect me to another url. i don't even know if it's 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>

Upvotes: 4

Views: 24976

Answers (2)

kchason
kchason

Reputation: 2885

<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 this should work.

Upvotes: 4

david
david

Reputation: 4278

Yes it is possible

Add onchange event handler to your select.

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

Set the display for the box ID you wish to hide to hidden. 

   #box1{display:none} //css

Here is a generic function that recives argument based on reference, Based on your question so you can easly have lots of to an from airport choices just add the below to each of your selects if you need more choices.

 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";
    }
  }

Upvotes: 1

Related Questions