Q:

Set option classes from array of data

I have two dropdown menus (state and county) that control the display of divs containing city info. The county menu generates options for all the city divs, but the duplicate options are filtered out on document ready. That aspect works fine, as shown in the jsfiddle here:
https://jsfiddle.net/ph68fxya/
What doesn't completely work is hiding the county options that are irrelevant when a particular state is selected. I have a function for that which I've included after, but it won't work until I can figure out how to set the classes with stateValues in the county menu options. I know I have to loop through, but I can't figure out how to do that. Any help would be much appreciated. Thanks.
$(document).ready(function () {
var stateValues = [];
var countyValues = [];
$("div.city").each(function (index, elem) {
    stateValues.push($(this).data("state"));
    countyValues.push($(this).data("county"));
});
var uniqueValues = [];
$(countyValues).each(function (index, item) {
    if ($.inArray(item, uniqueValues) == -1) uniqueValues.push(item);
});
$(uniqueValues).each(function (index, item) {
    $("#county").append($("<option class='"+stateValues+"'>").html(item));
});
});

Here is the additional function, which should work once the option classes are defined:
$.conditionalize = function(state,county){
var counties = view.children().clone();    
state.change(function(){
    var chooseState = $(this).val();                  
    view.children.not((".chooseState")).remove();
    counties.clone().filter("."+counties).appendTo(county);
}).trigger("change");
}
$.conditionalize($("#state"),$("#county"));

A:

Try this. This would filter your county based on the state.
$(document).ready(function () {
        var stateValues = [];
        var countyValues = [];
        var countyState = {};
        $("div.city").each(function (index, elem) {
            stateValues.push($(this).data("state"));
            countyValues.push($(this).data("county"));
            countyState[$(this).data("county")] = $(this).data("state");
        });
        var uniqueValues = [];
        $(countyValues).each(function (index, item) {
            if ($.inArray(item, uniqueValues) == -1) uniqueValues.push(item);
        });
        $(uniqueValues).each(function (index, item) {
            $("#county").append($("<option class='" + countyState[item] + "'>").html(item));
        });

        $("#state").change(function()
        {
            var val = $(this).val();
            $("#county option").each(function()
            {
               if($(this).attr("class") != val)
                   $(this).hide();
                else
                    $(this).show();
            });            
        });

    });

https://jsfiddle.net/ph68fxya/2/

