выберите опцию по клику изменить URL или изменить DIV - PullRequest
Новая
       10

выберите опцию по клику изменить URL или изменить DIV

4 голосов
/ 11 октября 2011

Итак, я пытаюсь сделать так, чтобы в данный момент я выбрал первый вариант, чтобы показать div, если я выбрал вариант 2, чтобы перенаправить меня на другой URL.Я даже не знаю, возможно ли это!образец: 

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

Ответы [ 2 ]

3 голосов
/ 11 октября 2011 
<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, но это должно сработать.

1 голос
/ 11 октября 2011

Да, это возможно

Добавьте обработчик события onchange к вашему выбору. 

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

Установите отображение идентификатора ящика, который вы хотите скрыть, чтобы скрыть его. 

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