Show different SELECT menu when different radio button selected

Question

I have five radio buttons as follow:

<input type="radio" id="Gold" name="PackageID" value="77"/>
<input type="radio" id="Silver" name="PackageID" value="73"/>
<input type="radio" id="Bronze" name="PackageID" value="72"/>
<input type="radio" id="Copper" name="PackageID" value="94"/>
<input type="radio" id="Tester" name="PackageID" value="71"/>

and following two select menues:

<select name="DripFeed" id="select3-basic" tabindex="1" data-placeholder="Days.." class="span1">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select name="DripFeed1" id="select3-basic" tabindex="1" data-placeholder="Days.." class="span2">
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="2">4</option>
<option value="2">5</option>
<option value="2">6</option>
</select>

Now what I need is that once user select radio buttons with IDs: Gold, Silver, Bronze, Copper to show select menu with name DripFeed and once user select radio button with ID tester to show select menu with name DripFeed1.

Thanks for help.

Answer 1

As you can't uncheck a radio and only one radio in the group can be checked, any change would normally be to check it, and if the ID of the checked radio matches Tester, show DripFeed1 and hide DripFeesd, otherwise do the opposite :

$('[name="PackageID"]').on('change', function() {
    var state = this.id == 'Tester';

    $('[name="DripFeed1"]').toggle(state);
    $('[name="DripFeed"]').toggle(!state);
});

Note that ID's are unique, and you're using select3-basic multiple times (and the same tabindex).

FIDDLE