Question

我已经在5个不同的文件中使用此功能用于不同的ID字段。当我用更多数据填充它时，我的页面中会有很多相同的代码。反正只是从另一个文件调用特定的var items数组？我是JavaScript和jQuery的新手。

var items = [{
    name: '-Моля,изберете-',
    value: '',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }]
}, {
    name: 'BMW',
    value: 'bmw',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }, {
        name: '320',
        value: '320'
    }, {
        name: '330',
        value: '330'
    }]
}, {
    name: 'Toyota',
    value: 'toyota',
    subitems: [{
        name: 'MR2',
        value: 'mr2'
    }, {
        name: 'Capry',
        value: 'capry'
    }]
}];


jQuery(document).ready(function ($) {

    var temp = {};
    $.each(items, function () {
        $("<option />")
            .attr("value", this.value)
            .html(this.name)
            .appendTo("#adm_car_make");

        temp[this.value] = this.subitems;
    });

    $("#adm_car_make").change(function () {
        var value = $(this).val(),
            menu = $("#adm_car_model");

        menu.empty();

        $.each(temp[value], function () {
            $("<option />")
                .attr("value", this.value)
                .html(this.name)
                .appendTo(menu);
        });

    }).change();
});

Answer 1

您实际上可以将几乎所有功能拆分为一个单独的文件，该文件将2个参数（makeField和modelField）作为标记页面的函数。

// Start of first file declare the function and the data once.
var myCars = [{
    name: '-Моля,изберете-',
    value: '',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }]
}, {
    name: 'BMW',
    value: 'bmw',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }, {
        name: '320',
        value: '320'
    }, {
        name: '330',
        value: '330'
    }]
}, {
    name: 'Toyota',
    value: 'toyota',
    subitems: [{
        name: 'MR2',
        value: 'mr2'
    }, {
        name: 'Capry',
        value: 'capry'
    }]
}];


jQuery(document).ready(function ($) {
    // Make a reusable function
    window.makeCarsDropdown = function (makeField, modelField) {
        var temp = {};
        $.each(myCars, function () {
            $("<option />")
                .attr("value", this.value)
                .html(this.name)
                .appendTo(makeField);

            temp[this.value] = this.subitems;
        });

        $(makeField).change(function () {
            var value = $(this).val(),
                menu = $(modelField);

            menu.empty();

            $.each(temp[value], function () {
                $("<option />")
                    .attr("value", this.value)
                    .html(this.name)
                    .appendTo(menu);
            });

        }).change();
    }
});
/* End of first file */

然后，您可以在包含上述文件后随时随地调用makeCarsDropdown函数，并将其传递给selectors

// Call the function from anywhere e.g.
jQuery(document).ready(function ($) {
    makeCarsDropdown("#adm_car_make", "#adm_car_model");
});

Javascript函数重建

1 个答案: