Jquery 从数据数组中设置选项类

我有两个下拉菜单（州和县），控制包含城市信息的div的显示。county菜单为所有city div生成选项，但重复的选项会在document ready中过滤掉。这方面工作得很好，如JSFIDLE所示：

不完全起作用的是隐藏在选择特定州时不相关的县选项。我有一个函数，用于后面包含的功能，但在我弄清楚如何在county菜单选项中使用StateValue设置类之前，它不会起作用。我知道我必须循环，但我不知道怎么做。任何帮助都将不胜感激。谢谢

$(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));
});
});

---

我会做一些类似的事情来设置课程。使用对象跟踪哪个县属于哪个州。然后，在为county select字段创建选项时，使用对象查找该选项所属的状态

小提琴：

$（文档）.ready（函数（）{
var stateValues=[]；
var countyvalue=[]；
//初始化对象
var countyState={}；
$（“分区城市”）。每个（功能（索引，要素）{
stateValues.push（$（this.data（“state”））；
countyValues.push（$（this.data（“县”））；
//对于每个县，将其州添加到对象
countyState[$（此）.data（“县”）]=$（此）.data（“州”）；
});
var唯一值=[]；
$（CountyValue）。每个（函数（索引，项）{
如果（$.inArray（项，uniqueValues）=-1）uniqueValues.push（项）；
});
$（唯一值）。每个（函数（索引，项）{
//创建county选项时，请在对象中查找其状态
$（“#县”）.append（$（“”）.html（item））；
});
});

试试这个。这将根据州对您的县进行筛选

$(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();
            });            
        });


    });

$（文档）.ready（函数（）{
var stateValues=[]；
var countyvalue=[]；
var countyState={}；
$（“分区城市”）。每个（功能（索引，要素）{
stateValues.push（$（this.data（“state”））；
countyValues.push（$（this.data（“县”））；
countyState[$（此）.data（“县”）]=$（此）.data（“州”）；
});
var唯一值=[]；
$（CountyValue）。每个（函数（索引，项）{
如果（$.inArray（项，uniqueValues）=-1）uniqueValues.push（项）；
});
$（唯一值）。每个（函数（索引，项）{
$（“#县”）.append（$（“”）.html（item））；
});
$（“#状态”）.change（函数（）
{
var val=$（this.val（）；
$（“#县选项”）。每个（函数（）
{
if（$（this.attr（“类”）！=val）
$（this.hide（）；
其他的
$（this.show（）；
});            
});
});

---

是否要根据州筛选县下拉列表？是。在底部函数中，它将删除其类与选定状态不匹配的选项。顶部的stateValues和底部的chooseState最终将是相同的。非常感谢，Dinmyte。那正是我想要的。

$(document).ready(function () {
    var stateValues = [];
    var countyValues = [];
    // Initialize object
    var countyState = {};
    $("div.city").each(function (index, elem) {
        stateValues.push($(this).data("state"));
        countyValues.push($(this).data("county"));
        // For each county add its state to object
        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) {
        // As you create county option find its state in object
        $("#county").append($("<option class='" + countyState[item] + "'>").html(item));
    });
});

$(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();
            });            
        });


    });