0

ドロップダウンメニューの「カテゴリ」とサブカテゴリを表示しようとしています。javascriptを使用してから数年が経ちましたので、問題が発生しています。私が持っているコードは、単にhtmlselect入力を入力していません。コードが単純すぎるのか、小さなエラーが発生しただけなのかはわかりませんが、機能させることができないようです。多分誰かが私がどこで間違っているのか教えてくれるでしょう。ありがとう。

<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 に答える