JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add-to-cart" class="btn-size-not-selected"> <span class="size-selected">Add to cart</span>
 <span class="size-not-selected">Choose size</span>

</button>
<select id="size">
    <option value="-1"></option>
    <option value="1">S</option>
    <option value="2">M</option>
    <option value="3">L</option>
</select>

CSS

#add-to-cart.btn-size-not-selected span.size-not-selected {
    display:none
}
#add-to-cart.btn-size-not-selected:hover span.size-not-selected {
    display:block
}
#add-to-cart.btn-size-not-selected:hover span.size-selected {
    display:none
}
#add-to-cart.btn-size-selected span.size-not-selected {
    display:none
}

JavaScript

$('#size').change(function () {
    var btn = $('#add-to-cart');
    if (parseInt($(this).val()) == -1) {
        btn.removeClass("btn-size-selected");
        btn.addClass("btn-size-not-selected");
    } else {
        btn.removeClass("btn-size-not-selected");
        btn.addClass("btn-size-selected");
    }
})

$('#add-to-cart').click(function () {
    if ($(this).hasClass('btn-size-selected')) {
        //add to cart here
    } else {
        //expand your size list
    }
})