Highlight selections with HTML / jQuery

Question

I want to create a drop-down menu in which the second choice will be displayed if the data of the first choice belongs to a certain category.

As you can see below, the first choice will be dedicated to COUNTRIES. If the selected country has states, then a second snapshot containing the states of that country will be displayed.

1) Is there a tag (in my code “xyz”) that I can use to separate countries in the categories “state” and “without state”? If so, how can I find out the meaning of the "xyz" tag?

2) If I use:

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

and then use jQuery to read, it will give me GermanySpain value (this 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>

PART OF JERKVI

$(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 solve this problem?

Thank.

Answer 1

​​ , 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

Answer 2

, .data() jQuery, data-* html5, script:

$('#country select').change(function() {
   if ($(this).find('option:selected').data('xyz') === 'no-state') {
    $('div#state').hide();
   } else {
    $('div#state').show();
  }
});

---

data-*, html5.

<select>
   <option data-xyz="no-state" value="Germany">Germany</option>
   <option data-xyz="state" value="USA">USA</option>
   <option data-xyz="no-state" value="Spain">Spain</option>
</select>

Answer 3

class :

HTML

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

JavaScript

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

Fiddle

Answer 4

, html :

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

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

:

$("#country").change(function() { 
    var hasState = $(this).find(':selected').attr('xyz') === "state";
    $("#state").toggle(hasState);
});

fiddle, .