jquery - 根据先前的下拉列表显示下拉值

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()。