Question

顺便说一句，我刚从这里的一个问题中得到了js代码，但我不知道为什么它不适用于我的。请帮帮我。

.js文件

 jQuery(function ($) {
    var College = {
        'College of Engineering': ['Civil Engineering', 'Computer Engineering', 'Electronics and Communication Engineering', 'Electrical Engineering', 'Industrial Engineering'],
    }

    var $College = $('#college');
    $('#department').change(function () {
        var department = $(this).val(), clg = College[department] || [];

        var html = $.map(clg, function (cl) {
            return '<option value="' + cl + '">' + cl + '</option>'
        }).join('');
        $College.html(html)
    });
});

我的代码错了吗？我不知道为什么它不起作用。

这个的HTML代码是

<select class="form-control" name="college" id="college" runat="server">
                     <option value="College">Select College</option>
                     <option value="College of Engineering">College of Engineering</option>
                     <option value="CAS">College of Arts and Science</option>
                     <option value="Commerce">College of Commerce</option> 
                 </select>
<select id="department" class="form-control" runat="server" placeholder="Department" >
                    <option value="Department">Select Department</option>
                </select>

Answer 1

您可以执行以下操作：https://jsfiddle.net/rockmandew/12ej2rt3/

设置HTML标记，如下所示：（*此示例包含三步下拉选项）

<select id="main_list">
    <option value="default" selected>Select Your List</option>
    <option value="mobile">mobile list</option>
    <option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>

然后JS如下：

$(function() {
var sel, i,
    list = ['mobile', 'laptop'],
    phone = ['Samsung', 'Nokia'],
    laptop = ['HP', 'Dell'],
    android = ['4.1', '4.2'],
    windows = ['8', '8.1'],
    dev_default = '<option value="default" selected>Select your Device brand</option>',
    os_default  = '<option value="default" selected>Select your OS version</option>';

sel_brand = $('#brand');
sel_version = $('#version');

$('select').change(function() {
    switch (this.id) {
        case 'main_list':
            $('.secondary').hide();
            sel_brand.find('option').remove();
            sel_brand.append(dev_default);
            sel_brand.show();
            if (this.value == 'mobile') {
                for (i = 0; i < phone.length; i++) {
                    $("#brand").append(
                        '<option value="' + phone[i] + '">' + phone[i] + '</option>'
                    );
                }
            }else if (this.value == 'laptop') {
                for (i = 0; i < phone.length; i++) {
                    $("#brand").append(
                        '<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
                    );
                }
            }
            break;
        case 'brand':
            sel_version.find('option').remove();
            sel_version.append(os_default);
            sel_version.show();
            if (this.value == 'Samsung') {
                for (i = 0; i < android.length; i++) {
                    $("#version").append(
                        '<option value="' + android[i] + '">' + android[i] + '</option>'
                    );
                }
            }else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
                for (i = 0; i < windows.length; i++) {
                    $("#version").append(
                        '<option value="' + windows[i] + '">' + windows[i] + '</option>'
                    );
                }
            }
            break;
    }
});

}); //END document.ready()

此外，如果您需要/想要了解如何从文本文件，JSON或数据库动态填充这些下拉列表的更多信息，请查看以下文章：https://css-tricks.com/dynamic-dropdowns/

Cascading Dropdown无法使用jquery

1 个答案: