How does jquery determine whether select is hidden?

two select, is a city drop-down choice, the first is a province choice, and the other is a city choice.
the city selection plug-in automatically hides the second one, which is displayed only when the selected province has a city.

the code is as follows:

<select></select> <select style="display: none;"></select> /**/

my question is how to determine how to add a class if select currently shows only one style without adding styles, if two

are displayed. Later, if you choose another province and there is no city to choose from, the previously added style in

will be removed. What should I do, please? Thank you very much! ~

Aug.29,2021

<p id="select-box">
    <select id="province">
        <option value=""></option>
        <option value=""></option>
    </select>
    <select style="display: none;" id="city"></select>

<script> $(function(){ var city = $('-sharpcity'); $('-sharpprovince').change(function(){ if(city.css('display')=='none'){ $('-sharpselect-box').addClass('hasCity'); }else{ $('-sharpselect-box').removeClass('hasCity'); } }) }) </script>
Menu