根据以前的下拉菜单显示下拉列表值 [英] display dropdown values based on previous dropdown

问题描述

我有以下表单字段：

 < label for =carrier_sold>标签> 
< select name =carrier_soldid ='carrier_sold'> 
< option id ='carrier_sold'value =selected =selected>< / option> 
< option value =MetLife> Metlife< / option> 
< option value =旅行者>旅行者< / option> 
 
< / select> 
  

如果我选择Metlife的值，我需要将Bill，Full作为我的下拉列表值。 p>

如果我选择价值旅行者，我需要获得电子转帐，RCC作为我的下拉列表值。

 < label for =payment_plan>付款计划：< / label> 
< select name =payment_planid ='payment_plan'> 
< option id ='payment_plan'value =selected =selected>< / option> 
  

最后，如果我从上面的2个下拉列表中选择了Metlife和Bill，我需要显示一个单选按钮

 < label for =min_dp>是否需要最少的DP？ < /标签> 
< input type =radioname =yesvalue =是/>是
< input type =radioname =novalue =否/> ;否
  

否则不显示单选按钮。这在jquery中有些压倒性。有人可以指向正确的方向

解决方案

您需要引用每个孩子的父母。
运营商：

 < label for =carrier_sold>运营商出货：< / label> 
< select name =carrier_soldid =carrier_sold> 
< option value =selected =selected> Select ...< / option> 
< option value =MetLife> Metlife< / option> 
< option value =旅行者>旅行者< / option> 
 
< / select> 
  

旅行者：存储每个选项的父级，例如在 xyz 属性

 < label for =payment_plan>付款计划：标签> 
< select name =payment_planid =payment_plan> 
< option value =selected =selected> Select ...< / option> 
< option data-parent =MetLifevalue =bill> Bill< / option> 
< option data-parent =MetLifevalue =full> Full< / option> 
< option data-parent =Travelersvalue =eft> EFT< / option> 
< option data-parent =Travellersvalue =rcc> RCC< / option> 
< / select> 
  

jQuery：

  $（'＃carrier_sold'）。change（function（）{
 var parent = $（this）.val（）; 
 $（'＃payment_plan'）。 ）.each（function（）{
 if（$（this）.data（'parent'）！= parent）{
 $（this）.hide（）; 
} else $ （this）.show（）; 
}）; 
}）; 
  

为下一个实例重复。理想情况下，我将创建一个基于类的jQuery函数，而不是使用类而不是ID，并通过 data-child 属性或类似方式从每个父项中抽取各个子项。

再加上爵士乐，除非父母有价值，否则你可以隐藏孩子。您还可以尝试使用 change（） vs. blur（）。

I have the following form fields:

        <label for="carrier_sold">Carrier Sold: </label>
        <select name="carrier_sold" id='carrier_sold'>
        <option id='carrier_sold' value="" selected="selected"></option>
        <option value="MetLife">Metlife</option>
        <option value="Travelers">Travelers</option>

        </select>

If I select the value Metlife I need to get Bill,Full as my dropdown value below.

If I select the value Travelers I need to get EFT,RCC as my drop down value below.

        <label for="payment_plan">Payment Plan: </label>
        <select name="payment_plan" id='payment_plan'>
        <option id='payment_plan' value="" selected="selected"></option>

Finally,if I select Metlife and Bill from the above 2 dropdowns, I need to display a radio button below.

        <label for="min_dp">Is minimum DP required? </label>
        <input type="radio" name="yes" value="Yes" />Yes
        <input type="radio" name="no" value="No" />No

else dont display the radio button.It's kinda overwhelming to do in jquery. Can someone point me to the correct direction

解决方案

You need to reference the parent in each child. Carrier:

<label for="carrier_sold">Carrier Sold: </label>
    <select name="carrier_sold" id="carrier_sold">
    <option value="" selected="selected">Select...</option>
    <option value="MetLife">Metlife</option>
    <option value="Travelers">Travelers</option>

    </select>

Travelers: store the parent for each option, for example in a data-xyz attribute.

<label for="payment_plan">Payment Plan: </label>
<select name="payment_plan" id="payment_plan">
   <option value="" selected="selected">Select...</option>
   <option data-parent="MetLife" value="bill">Bill</option>
   <option data-parent="MetLife" value="full">Full</option>
   <option data-parent="Travelers" value="eft">EFT</option>
   <option data-parent="Travelers" value="rcc">RCC</option>
</select>

The jQuery:

$('#carrier_sold').change(function() {
   var parent = $(this).val();
   $('#payment_plan').children().each(function() {
      if($(this).data('parent') != parent) {
                $(this).hide();
      } else    $(this).show();
   });
});

Repeat for the next instance. Ideally, I'd make a class-based jQuery function that works off of classes instead of IDs, and pulls the respective children from each parent via a data-child attribute or similar.

And to jazz it up even more, you could hide the child unless the parent has a value. You can also experiment with change() vs. blur().

这篇关于根据以前的下拉菜单显示下拉列表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！