JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div id="zone-select-wrapper">
    <div class="form-item webform-component webform-component-select" id="webform-component-donor-information--state">
        <div class="selector" id="uniform-edit-submitted-donor-information-state" style="width: 244px;">
            <select class="webform form-select required" id="edit-submitted-donor-information-state" name="submitted[donor_information][state]">
                <option value="">- Select -</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA" selected="selected">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="DC">District Of Columbia</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option...

JavaScript

$('#edit-submitted-donor-information-country').change(function () {
   
    var stateprovince = $(this).val();
    // Hide the state select list on change if it's not CA or the US.

    // single state works
    //if (stateprovince.val() !== 'US') {

    // two state with an or does not.
    if ((stateprovince !== 'US') && (stateprovince !== 'CA')) {
        $('#edit-submitted-donor-information-state').hide();
    } else {
        // Show if CA or US.
        $('#edit-submitted-donor-information-state').show();
    }
});