display dropdown values based on previous dropdown

Question

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

Don't set id values for options (unless they are unique). – Eve Freeman Feb 07 '12 at 03:15 — Eve Freeman, Feb 07 '12 at 03:15
Have you put any effort to try yourself? – ShankarSangoli Feb 07 '12 at 03:33 — ShankarSangoli, Feb 07 '12 at 03:33

bobsoap · Accepted Answer · 2012-02-07T03:59:38.580

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

Thanks @bobsoap..now if i want to display a radio button or another dropdown depending on the combination of the values of the above 2 dropdowns do i need to follow a similar parent,child pattern? — Micheal, Feb 07 '12 at 15:29
You're welcome! Yes - it would really be best to use classes instead of IDs, that way the jQuery functions you write are reuseable and you don't have to repeat the same thing for every instance. You can add as many `data-xyz="abc"` attributes to your HTML as you like, e.g. the payment_plan options would be "children" of the carrier_sold field, and at the same time, they'd be "parents" of the radio buttons. — bobsoap, Feb 08 '12 at 01:10

score -1 · Answer 2 · answered Feb 07 '12 at 03:16

-1

Check Creating Cascading Dropdown List Using JQuery

answered Feb 07 '12 at 03:16

Amritpal Singh

1,765
1
13
20

display dropdown values based on previous dropdown

2 Answers2

Linked

Related