Drop down selection using HTML/jQuery

Question

I want to build a drop down menu that the second selection will be displayed if the first selection data belongs to a specific category.

As you can see below, the first selection will be about COUNTRIES. If the country selected has states, then a second drop down selection will be displayed, containing the states of that country.

1)Is there a tag (in my code "xyz") that i can use it to separate the countries in "state" and "no-state" categories? If there is, how can i read the value of the "xyz" tag?

2) If i use the:

<option class="no-state" value="Germany">Germany</option>

and then use the jQuery to read it it will give me the value GermanySpain (which is correct but not what i want)

$('.no-state').val();

HTML PART

<div id="country">
 <select>
     <option xyz="no-state" value="Germany">Germany</option>
     <option xyz="state" value="USA">USA</option>
     <option xyz="no-state" value="Spain">Spain</option>
 </select>
</div>

<div id="state" style="display:none" >
 <select>
     <option value="Utah">Utah</option>
     <option value="New York">New York</option>
     <option value="California">California</option>
 </select>
</div>

JQUERY PART

$(document).ready(function(){
    $('#country').change(function() {

       if (the value of "xyz" tag is === 'no-state')  
       {
        $('div#state').hide();
       }
       else
      {
        $('div#state').show();
      }
    });
});

What can i do to address this issue?

Thanks.

Answer 1

Added a variable to keep if a country has states or not according your custom attribute xyz

js

$(document).ready(function(){
    $('#country').change(function() {
       var hasStates = $(this).find("option:selected").attr("xyz");
       if (hasStates == 'no-state')  
       {
        $('div#state').hide();
       }
       else
      {
        $('div#state').show();
      }
    });
});

fiddle