选择选项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

回答

相关问题