JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />

<select id='Choice'></select>

<select id='source'>
    <optgroup data-type='Attractions'>
        <option disabled>ATTRACTIONS</option>
        <option value="Castles">Castles</option>
        <option value="History">History</option>
    </optgroup>
    <optgroup data-type='Restaurants'>
        <option disabled>Restaurants</option>
        <option value="China food">Chinas food</option>
        <option value="Pizza">Pizza</option>
        <option value="Pub">Pub</option>
    </optgroup>
</select>

CSS

#source {
    display: none;
}

JavaScript

//Pull default data from Attractions
$('#Choice').append($('#source optgroup[data-type=Attractions]').clone());

$('input[name=restaurants]').on('change', function() {
    if($(this).is(':checked')) {
        //Replace with data from Restaurants
        $('#Choice').empty().append($('#source optgroup[data-type=Restaurants]').clone());
    } else {
        //Replace with data from Attractions
        $('#Choice').empty().append($('#source optgroup[data-type=Attractions]').clone());
    }
})