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

Answer 2

I think you can make use of .data() jQuery method, which reads the data-* a valid html5 attribute, but you have to change your markup to fix and use this script:

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

---

You have to add a data-* prefix to get to it and make it a valid html5 attribute.

<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

Using the class attribute isn't that bad:

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

First of all I would change your html structure to:

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

Then you can simply do:

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

Here is a fiddle to see it in action.