如何使用带有值的 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());
});