0

我正在尝试显示下拉菜单“类别”和子类别。自从我使用 javascript 以来已经有几年了，所以我遇到了一些问题。我的代码根本没有填充 html 选择输入。我不知道代码是否过于简单，或者我只是犯了一些小错误，但我似乎无法让它工作。也许有人可以告诉我哪里出错了。谢谢。

<html>
    <select name="cat" id="menu1" class="menu"></select>
    <select name="subcat" id="menu2" class="menu"></select>
</html>

<script type = "text/javascript">

    var data = {
        "category":["sub-category"],
        "music": ["sub-category","rock", "punk"],
        "film": ["sub-categoy","comedy", "drama"],
        "tv": ["sub-catery","sit-com", "soap opera"],
    }


    for (var i in data) {
        $('#menu1').append('<option>' + i + '</option>');
    }


    $('#menu1').change(function() {
        var key = $(this).val();
        $('#menu2').empty();
        for (var i in data[key]) {
            $('#menu2').append('<option>' + data[key][i] + '</option>');
        }
    }).trigger('change');

</script>
4

2 回答 2

0

您已经发布了 jQuery 代码。例如：$('#menu1')

所以一定要在脚本标签中调用 jQuery 库，并将所有这样的代码放在一个 jQuery 块中，如下所示：

更新

我已经修复了代码以使其正常工作。在此处查看实际操作：http: //jsfiddle.net/QYcMt/1/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type = "text/javascript">
    $(function () { 

        var data = {
            "category":["sub-category"],
            "music": ["sub-category","rock", "punk"],
            "film": ["sub-categoy","comedy", "drama"],
            "tv": ["sub-catery","sit-com", "soap opera"],
        };


        $.each(data, function(key, value){            

            $('#menu1').append($('<option />').text(key));
        });


        $('#menu1').change(function() {
            var key = $(this).val();
            $('#menu2').empty();
            for (var i in data[key]) {
                $('#menu2').append('<option>' + data[key][i] + '</option>');
            }
        }).trigger('change');

</script>
于 2012-08-08T09:54:25.330 回答
0

脚本可能在 HTML 元素进入 DOM 之前运行？将 Javascript 包装在

$(function() { ...yourcode... });
于 2012-08-08T09:56:19.723 回答