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

Answer 2

检查Creating Cascading Dropdown List Using JQuery

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

2 个答案: