Question

我正在尝试显示下拉菜单的“类别”和子类别。我使用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>

Answer 1

你发布了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>

Answer 2

可以在HTML元素位于DOM之前运行脚本吗？将你的Javascript包装在

中总是更好

$(function() { ...yourcode... });

根据先前的选择显示选择选项

2 个答案: