JSFiddle - React, Tailwind, and code Playground

by Nilantha Piyasiri

HTML

<select name="group">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
<br />

<select name="group_a" class="hidden_select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<select name="group_b" class="hidden_select">
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<select name="group_c" class="hidden_select">
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
</select>

CSS

.hidden_select {display: none;}

JavaScript

// This decoument ready can be used as setting the default value. If you remove the "checked", from the first radiobutton..then both selects will be hidden and of course none of the radiobuttons will be checked
$(document).ready(function() {
    
    // Lets get the default group by checking which radiobutton is checked
    var current_checked = $('select[name=group]:selected');
    
    // If we have a default value on load, then:
    if (current_checked) {
        
        // We pick the select matching to our radiobuttons value and make it visible
        $('select[name=group_' + current_checked.val() + ']').show();
        // PS: You can use .fadeIn() instead of show()
        
    }
    
});

// Now lets catch the click action on any of the radiobuttons
$('select[name=group]').change(function () {
    
    // Lets get the group ID (a or b), from radiobuttons value
    var this_group = $(this).val();
    
    // First lets make both selects equal and hide them
    $('select.hidden_select').hide();
    
    // Then display the currently active select
    $('select[name=group_' + this_group + ']').show();
    
});