如何使用ID與價值選擇選項另一種選擇期權價值的動態

Question

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script> 
 
<script type="text/javascript"> 
 
    var selector; 
 
    $(document).ready(function() { 
 
     $('#DropDownList1').change(function() { 
 

 
    // Hide all drop downs sharing the CSS class "toggledDropDown". 
 
    $('.toggledDropDown').hide(); 
 

 
    // Build a selector for the selected drop down 
 
    selector = ('#' + $(this).val()); 
 

 
    // Show the selected drop down 
 
    $(selector).show(); 
 

 
}); 
 

 
}); 
 

 
    $(document).ready(function() { 
 
    $(selector).change(function() { 
 
    //var Link = $(selector).val(); 
 
    //$('#Submit').click(function() { 
 
     //window.open(Link,'_blank'); 
 
    // alert(selector); 
 
    var Link = (selector + $(this).val()); 
 

 
    window.open(Link,'_blank'); 
 
    
 
     alert(Link); 
 
}); 
 
}); 
 

 

 
</script>

.toggledDropDown 
 
{ 
 
    display: none; /* Hiding the optional drop down lists */ 
 
}

<div class="hrweb_box"> 
 
<ul> 
 
<li><select id="DropDownList1" class="ctype"> 
 
    <option value=""> SELECT </option> 
 
    <option value="1"> VISTO DE VISITANTE </option> 
 
    <option value="2">INTERCAMBIO & TRAINEE </option> 
 
    <option value="3">VISTO DE ESTUDANTE </option> 
 
    <option value="4">GREEN CARD</option> 
 
    <option value="5">VISTO DE TRABALHO</option> 
 
    <option value="6">VISTO DE INVESTIMENTO</option> 
 
</select></li> 
 

 
<FORM name="f1"> 
 
<li> 
 
<select id="1" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/vistos-eua/"> VISTO B1 NEGOCIO </option> 
 
    <option value="http://panavent.com/visto-de-visitante-b2/">VISTO B2 TURISMO </option> 
 
</select></li> 
 

 
<li><select id="2" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/1338-2/"> AU PAIR </option> 
 
    <option value="http://panavent.com/trainee/">TRAINEE</option> 
 
    <option value="http://panavent.com/intern-nos-eua/"> NTERN </option> 
 
    <option value="http://panavent.com/camp-counselor/">CAMP COUNSELOR </option> 
 
    <option value="http://panavent.com/summer-camp-usa/"> SUMMER CAMP </option> 
 
    <option value="http://panavent.com/trabalho-de-verao/">SUMMER WORK</option> 
 
</select></li> 
 

 
<li><select id="3" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/visto-do-estudantes/"> F-1 PARA CURSOS COMPLETOS </option> 
 
    <option value="http://panavent.com/visto-m1/">M-1 PARA PROGRAMAS TECNICAS </option> 
 
    <option value="http://panavent.com/estudante-segundario-eua/"> J-1 PARA ESTUDANTE SECUNDARIO  </option> 
 
    <option value="http://panavent.com/estudantes-em-colegios-e-universidades/">J-1 PARA ESTUDANTE EM UNIVERSIDADES </option> 
 
</select>​</li> 
 

 

 
<li><select id="4" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/visto-eb-1/"> EB-1 GREEN CARD </option> 
 
    <option value="http://panavent.com/visto-eb-2/">EB-2 GREEN CARD </option> 
 
    <option value="http://panavent.com/visto-eb-3/"> EB-3 GREEN CARD </option> 
 
    <option value="http://panavent.com/visto-eb-4/">EB-3 GREEN CARD </option> 
 
    <option value="http://panavent.com/visto-eb-5/"> EB-5GREEN CARD </option> 
 
</select>​</li> 
 

 
<li><select id="5" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/391-2/"> H1B TRABALHO QUALIFICADO  </option> 
 
    <option value="http://panavent.com/1324-2/">H2A TRABALHO EM AGRICULTURA </option> 
 
    <option value="http://panavent.com/visto-h2b/"> H2B TRABALHO TEMPORARIO  </option> 
 
    <option value="http://panavent.com/visto-l-1-trabalho/">L1A TRANSFERENCIA INTRA COMPANY </option> 
 
    <option value="http://panavent.com/visto-l-1b/"> L1B TRANSFERENCIA INTRA COMPANY </option> 
 
    <option value="http://panavent.com/trabalho-de-verao/"> SUMMER WORK </option> 
 
    
 
</select>​</li> 
 

 
<li><select id="6" name="menu4" class="toggledDropDown ctype"> 
 
    <option value="http://panavent.com/visto-e2-investor/"> VISTO E-2 TRATADO</option> 
 
    <option value="http://panavent.com/visto-eb-5/">VISTO EB-5 INVESTIMENTO</option> 
 
</select></li>​ 
 
<li><input id="Submit" type="button" name="Submit" value="Go!"> 
 
</ul> 
 
</div>

當你要像 綠卡然後選擇一個又一個選擇選項開有四個選擇，然後選擇

你的選擇和點擊去（提交按鈕），然後我會按照鏈接去。

- 工作---

1. ，當你選擇像上面一樣綠卡這是工作

2. 我搞不​​清如何選擇選項像綠卡第一個選項 - >後有四個鏈接任何人選擇然後點擊按鈕和位置去按照鏈接

請幫助如何做到這一點我不知道。

Answer 1

首先 - 您沒有關閉您的<form>標記。另外，我改變了你的代碼，使它更加有用（如果我明白你在做什麼）。給它一個去，希望這是你在找什麼。

JSFiddle

$('.toggledDropDown').parent('li').hide(); //Hide sub-dropdown menus until initial dropdown is selected 

//On change of initial select 
$('#DropDownList1').change(function() { 
    $('.toggledDropDown').parent('li').hide(); //Hide any open sub-dropdown menus 
    var id = $(this).val(); //Get value from initial dropdown for sub-dropdown ID 
    $('#' + id).parent('li').show(); //Show corresponding sub-dropdown menu 
}); 

$('#Submit').click(function() { 
    var link = $('#' + $('#DropDownList1').val()).val(); 
    window.open(link); 
}); 

Answer 2

在按鈕單擊事件上，獲取第一個選擇框的值，然後使用它獲取相應選擇框的值。然後用該值重定向頁面。

$('#Submit').click(function(e){ 
    e.preventDefault(); 
    window.location.replace($('#' + $('#DropDownList1').val()).val()); 
});