显示基于先前下拉列表的下拉值

Question

我有以下表单字段:

        <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>

如果我选择值Metlife,我需要将Bill,Full作为下面的下拉值.

如果我选择值得旅行者我需要获得EFT,RCC作为我的下拉值.

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

最后,如果我从上面的2个下拉菜单中选择Metlife和Bill,我需要在下面显示一个单选按钮.

        <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

否则不要显示单选按钮.在jquery中有点压倒性.有人能指出我正确的方向

Answer 1

您需要引用每个孩子的父母.运营商:

<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>

旅行者:存储每个选项的父级,例如在data-xyz属性中.

<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>

jQuery:

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

重复下一个实例.理想情况下,我会创建一个基于类的jQuery函数,该函数使用类而不是ID,并通过data-child属性或类似方法从每个父级中提取相应的子元素.

为了使它更加爵士乐,除非父母有价值,否则你可以隐藏孩子.你也可以尝试change()与blur().