JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<select name="pet_type">
    <option></option>
    <option value="Cat" data-pet-type="Cat">Cat</option>
    <option value="Dog" data-pet-type="Dog">Dog</option>
</select>
<select name="breed" disabled="disabled">
    <option></option>
    <option data-pet-type="Cat" disabled="disabled">--- Cat Breeds</option>
    <option value="Chartreux" data-pet-type="Cat">Chartreux</option>
    <option value="Cymric" data-pet-type="Cat">Cymric</option>
    <option data-pet-type="Dog" disabled="disabled">--- Dog Breeds</option>
    <option value="Affenpinscher" data-pet-type="Dog">Affenpinscher</option>
    <option value="Anatolian Shepherd Dog" data-pet-type="Dog">Anatolian Shepherd Dog</option>
    <option value="Other">Other</option>
</select>

JavaScript

$(function () {
    $("[name='pet_type']").change(function () {
        var pet_type = $(this).val();
        $("[name='breed']").removeAttr("disabled");
        $("select[name='breed'] > option").each(function () {
            var o = $(this);
            console.log(o.data('pet-type')+":"+pet_type);
            if (o.data('pet-type') === pet_type) {
                o.prop('disabled',false);
            } else {
                o.prop('disabled',true);
            }
        });
    });
});