javascript - jQuery - 根据先前的选择动态选择数组

Question

我的表单中有两个下拉菜单，我希望第二个下拉菜单中的选项根据第一个下拉菜单中的选择进行更改。最终我还将根据第二个选择添加第三个选择，并根据第三个选择添加第四个选择。

我将选项存储在一个数组中，并编写了一个很长的 if 语句来根据第一个选择拉入相应的数组，但似乎必须有更好的方法来做到这一点，而不是重复所有代码。这可以完成工作，但我想改进代码。

我在网上查看了有关数据库和 JSON 数据的教程，但我不太明白它的意思。我确实可以访问与此表单所在的不同服务器/域上的数据库，但我对数据库不太熟悉，所以这对我来说是一条更容易走下去的路径。我也在这个网站上看到过一些帖子，但它们非常具体(就像我的一样)并且对我没有帮助。

希望这是有道理的。这是我第一次使用数组或尝试做类似的事情，所以提前感谢您帮助我学习!

JSfiddle:http://jsfiddle.net/QhBLq/

这是我的代码:

    $(document).ready(function() {
        $('div' + '.menu').hide();
        $('a').click(function ()
        {
            $('#' + $(this).attr('class')).show().siblings('div').hide();
        });
        var cookwareProds = [ "Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"];
        var bakewareProds = [ "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"];
        var kitchenToolProds = [ "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"];
        var dineEntertainProds = [ "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"];
        var prodSelect = $('select');
        prodSelect.change(function () {
            var catSelected = $(this).val();
            $('#subCats').fadeIn('fast');       
            $(this).parent("li").next().find("select > option").remove(); /*Prevents previous options from persisting in menu if parent category selection is changed*/             
            if (catSelected == 'Cookware') {
                $.each(cookwareProds, function(key, value) {   
                 $('#product-type')
                     .append($("<option></option>")
                     .attr("value",value)
                     .text(value)); 
            }); 
            } 
            if (catSelected == 'Bakeware') {
                $.each(bakewareProds, function(key, value) {   
                 $('#product-type')
                     .append($("<option></option>")
                     .attr("value",value)
                     .text(value)); 
            }); 
            } 
            if (catSelected == 'Kitchen Tools') {
                $.each(kitchenToolProds, function(key, value) {   
                 $('#product-type')
                     .append($("<option></option>")
                     .attr("value",value)
                     .text(value)); 
            }); 
            } 
            if (catSelected == 'Dine & Entertain') {
                $.each(dineEntertainProds, function(key, value) {   
                 $('#product-type')
                     .append($("<option></option>")
                     .attr("value",value)
                     .text(value)); 
            }); 
            }               
            if (catSelected == 'Other') {
                $(this).next('.other').show();
            } else $(this).next('.other').hide();
        });         
    });

Answer 1

使用对象简化代码，否则您的 fiddle 不会改变:

$(document).ready(function () {
    $('div' + '.menu').hide();
    $('a').click(function () {
        $('#' + $(this).attr('class')).show().siblings('div').hide();
    });

    prods = {
        Cookware: ["Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"],
        Bakeware: ["Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"],
        "Kitchen Tools": ["Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"],
        "Dine & Entertain": ["Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"]
    };
    var prodSelect = $('select');
    prodSelect.change(function () {
        var catSelected = $(this).val();
        $('#subCats').fadeIn('fast');
        $(this).parent("li").next().find("select > option").remove(); /*Prevents previous options from persisting in menu if parent category selection is changed*/
        $.each(prods[catSelected], function (key, value) {
            $('#product-type')
                .append($("<option></option>")
                .attr("value", value)
                .text(value));
        });
    });
});