Question

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

完全无效的是隐藏在选择特定州时无关的县选项。我有一个函数用于我之后包含的功能，但它不会工作，直到我能弄清楚如何在县菜单选项中使用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

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

小提琴：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/

从数据数组中设置选项类

2 个答案: