从数据数组中设置选项类

Question

我有两个下拉菜单（州和县）控制包含城市信息的 div 的显示。县菜单为所有城市 div 生成选项，但在文档就绪时会过滤掉重复的选项。这方面工作正常，如此处的 jsfiddle 所示：

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

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

这是附加功能，一旦定义了选项类，它应该可以工作：

$.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"));

Answer 1

我会做这样的事情来设置类。使用对象跟踪哪个县属于哪个州。然后，当您为县 select 字段创建选项时，使用该对象查找该选项属于哪个州。

Fiddle: https://jsfiddle.net/ph68fxya/1/

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

Answer 2

试试这个。这将根据州过滤您所在的县。

$(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/

从数据数组中设置选项类

Set option classes from array of data

jquery

arrays

html-select

从数据数组中设置选项 类

Set option classes from array of data

jquery

arrays

html-select

从数据数组中设置选项类