Question

我在表单中有两个下拉菜单，我希望第二个下拉列表中的选项根据第一个中的选择进行更改。最后，我还将添加基于第二个的第三个选择，以及基于第三个的第四个选择。

我将选项存储在一个数组中并编写了一个long 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

使用对象的简化代码，否则与小提琴无关：

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

Answer 2

这称为＆＃34; Cascading Dropdown＆＃34;，例如http://jquery-plugins.net/jquery-cascading-dropdown-plugin，或者您可以选择许多其他类似的插件

$('#example1').cascadingDropdown({
    selectBoxes: [
        {
            selector: '.step1',
            selected: '4.3'
        },
        {
            selector: '.step2',
            requires: ['.step1']
        },
        {
            selector: '.step3',
            requires: ['.step1', '.step2'],
            onChange: function(event, value, requiredValues) {
                // do stuff

                // event is the change event object for the current dropdown
                // value is the current dropdown value
                // requiredValues is an object with required dropdown values
                // requirementsMet is a boolean value to indicate if all requirements (including current dropdown having a value) have been met
            }
        }
    ]
});

jQuery - 根据之前的select动态选择数组

2 个答案: