選擇選項onclick更改網址或更改div

所以我想要做的是，在我選擇第一個選項的時刻，顯示一個div，如果我選擇選項2將我重定向到另一個網址。我甚至不知道這是否可能！樣本：選擇選項onclick更改網址或更改div

<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>

來源

2011-10-10 ciprian

將你永遠只能有兩種選擇，喜歡「從機場」和「到機場」的選擇？ – david

<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>

你可以把它更漂亮了很多與jQuery，但這應該工作。

來源

2011-10-10 22:46:04 kchason

你最後一行評論，ciprian從未提及他正在使用jquery :) – david

這工作！謝謝！ – ciprian

是有可能

添加onchange事件處理程序到你的選擇。

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

設置要隱藏隱藏式接線盒ID的顯示。

#box1{display:none} //css

這是一個泛型函數基於引用，收到
的說法，根據您的問題，所以你可以伊斯利有很多到從機場選擇只需添加以下到您的每個選擇，如果你需要更多的選擇。

onchange="return airportChoice(this)"

JS功能

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

來源

2011-10-11 00:02:59 david

也可以！謝謝... – ciprian

選擇選項onclick更改網址或更改div

回答

相關問題