如何使用带有值的id选择选项到另一个选择选项值dynamic

时间:2016-03-01 18:34:19

标签: javascript jquery

<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. 我很困惑如何选择像绿卡这样的选项 - &gt;在有四个链接后,任何人选择然后单击按钮,位置将根据链接

  3. 请帮助如何做到这一点我不知道。

2 个答案:

答案 0 :(得分:0)

在按钮单击事件中,获取第一个选择框的值,然后使用该值获取相应选择框的值。然后使用该值重定向页面。

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

答案 1 :(得分:0)

首先关闭 - 您没有关闭<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);
});