如何使用带有值的id来选择选项到另一个select选项值动态

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());
});