select 옵션 onclick url 변경 또는 div 변경

Question

그래서 내가 뭘 하려는지는 옵션 2를 선택하면 다른 URL로 리디렉션되도록 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> 

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> 

당신은 jQuery로는 훨씬 더 예쁘게 만들 수 있지만,이 작동합니다.

Answer 2

예 가능합니다.

원하는대로 onchange 이벤트 처리기를 추가하십시오.

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

숨기려는 상자 ID에 대한 표시를 숨김으로 설정합니다.

#box1{display:none} //css 

여기에 easly 당신이 더 많은 선택을해야 할 경우 당신의 선택의 각 아래의 추가 공항 선택에서까지 많이 가질 수 있도록 질문을 바탕으로 기준에 따라 인수를 recives 일반적인 기능이다.

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