选择选项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>
答
<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,但这应该工作。
答
是有可能
添加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";
}
}
+0
也可以!谢谢... – ciprian
将你永远只能有两种选择,喜欢“从机场”和“到机场”的选择? – david