Javascript 根据以前的选择显示选择选项_Javascript_Jquery_Html

Javascript 根据以前的选择显示选择选项

javascript jquery html

Javascript 根据以前的选择显示选择选项,javascript,jquery,html,Javascript,Jquery,Html,我试图显示下拉菜单“类别”和子类别。我已经有几年没有使用javascript了，所以我遇到了一些问题。我的代码只是没有填充html选择输入。我不知道代码是不是太简单了，或者我只是犯了一些小错误，但我似乎无法让它工作。也许有人能告诉我哪里出了问题。谢谢 <html> <select name="cat" id="menu1" class="menu"></select> <select name="subcat" id="menu2" cl

我试图显示下拉菜单“类别”和子类别。我已经有几年没有使用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>


风险值数据={
“类别”：[“子类别”]，
“音乐”：[“子类别”、“摇滚”、“朋克”]，
“电影”：[“子类别”、“喜剧”、“戏剧”]，
“电视”：[“副食品”、“情景喜剧”、“肥皂剧”]，
}
用于（数据中的var i）{
$（'#menu1'）。追加（'+i+''）；
}
$（'#menu1'）。更改（函数（）{
var key=$（this.val（）；
$（'#menu2'）.empty（）；
用于（数据[键]中的var i）{
$（'#menu2'）。追加（''+data[key][i]+''）；
}
}).触发（“变更”）；

您已经发布了jQuery代码。例如：

$（'menu1'）

因此，请确保在脚本标记中调用jQuery库，并将所有此类代码放在jQuery块中，如下所示：

更新

我已经修改了代码使它工作。请在此处查看它的实际操作：


$（函数（）{
风险值数据={
“类别”：[“子类别”]，
“音乐”：[“子类别”、“摇滚”、“朋克”]，
“电影”：[“子类别”、“喜剧”、“戏剧”]，
“电视”：[“副食品”、“情景喜剧”、“肥皂剧”]，
};
$.each（数据、函数（键、值）{
$（'#menu1'）。追加（$（''）.text（key））；
});
$（'#menu1'）。更改（函数（）{
var key=$（this.val（）；
$（'#menu2'）.empty（）；
用于（数据[键]中的var i）{
$（'#menu2'）。追加（''+data[key][i]+''）；
}
}).触发（“变更”）；

脚本可能在HTML元素进入DOM之前运行？最好将Javascript封装在DOM中

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

谢谢你解决了这个问题。我不知道你这么做了。我很感激这个帖子：）谢谢，我改了，很高兴能提醒你这些事情，因为我已经忘记了很多：）

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