jquery - Json 下拉列表

Question

当我点击要安装主题的部门时，当我点击主题时要安装的服务。但当我点击服务时却没有看到问题。我认为对json的描述不准确。你能帮我解决这个问题吗？谢谢。 我的 Jquery 代码；

/* <![CDATA[ */

(function($) {

$.fn.changeType = function(){

    var data = [
        {
        "department": "IT",
        "subject": [
                {"title":"Programmer",
                        "services" :[
                        {"name":"example1"},
                        {"name":"example2"}
                                  ]

                },
                {"title":"Solutions Architect"},
                {"title":"Database Developer"}
                ]
        },
        {"department": "Accounting",
        "subject": [
                {"title":"Accountant"},
                {"title":"Payroll Officer"},
                {"title":"Accounts Clerk"},
                {"title":"Analyst"},
                {"title":"Financial Controller"}
                ]
        },
        {
        "department": "HR",
        "subject": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },
        {
        "department": "Marketing",
        "subject": [
                {"title":"Market Researcher"},
                {"title":"Marketing Manager"},
                {"title":"Marketing Co-ordinator"}
                ]
        }
        ]

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i,d){
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var d = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(d.subject, function(i,j){
                            options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
};


        $("select#subject", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var j = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(j.services, function(i,b){
                            options += '<option value="' + b.name + '">' + b.name + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#services").html(options);
        })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

/* ]]> */

我的html代码；

<form id="search" action="" name="search">
    <select name="departments" id="departments">
        <option>Select</option>
    </select>

    <select name="subject" id="subject">
        <option>Select</option>
    </select>

    <select name="services" id="services">
        <option>Select</option>
    </select>

</form>

Answer 1

我编辑了你的代码，现在它可以工作了(通过在 fiddle 中选择第一个“IT”然后选择“程序员”来检查它)。当然，如果没有“服务”，则第三个选择中不会显示任何内容。 您应该向其添加一些逻辑，以便仅当存在与您的主题相关的服务时才显示第三个选择

(function($) {


    var data = [
        {
        "department": "IT",
        "subject": [
            {
            "title": "Programmer",
            "services": [
                {
                "name": "example1"},
            {
                "name": "example2"}
                          ]

            },
        {
            "title": "Solutions Architect"},
        {
            "title": "Database Developer"}
        ]},
    {
        "department": "Accounting",
        "subject": [
            {
            "title": "Accountant"},
        {
            "title": "Payroll Officer"},
        {
            "title": "Accounts Clerk"},
        {
            "title": "Analyst"},
        {
            "title": "Financial Controller"}
        ]},
    {
        "department": "HR",
        "subject": [
            {
            "title": "Recruitment Consultant"},
        {
            "title": "Change Management"},
        {
            "title": "Industrial Relations"}
        ]},
    {
        "department": "Marketing",
        "subject": [
            {
            "title": "Market Researcher"},
        {
            "title": "Marketing Manager"},
        {
            "title": "Marketing Co-ordinator"}
        ]}
    ]
    var selectedDepartment, selectedSubject;

    $.fn.changeType = function() {

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i, d) {
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments").change(function() {
            var index = $(this).get(0).selectedIndex;

            var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
            selectedDepartment = d;
            var options = '';
            if (index > 0) {
                options += '<option>Select<\/option>';
                $.each(d.subject, function(i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
    };


    $("select#subject").change(function() {
        var index = $(this).get(0).selectedIndex;
        selectedSubject = selectedDepartment.subject[index -1];
        var options = '';
        if (index > 0) {
            $.each(selectedSubject.services, function(i, b) {
                options += '<option value="' + b.name + '">' + b.name + '<\/option>';
            });
        } else {
            options += '<option>Select<\/option>';
        }
        $("select#services").html(options);
    })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

在这里摆弄:

http://jsfiddle.net/fF38L/

编辑 - 要使其在 IE8 上工作，请取消 console.log()

http://jsfiddle.net/fF38L/1/