

javascriptをhtmlに埋め込むという方法でやりました。html文とjavascript文をくっつけてやりました。  
ですが、うまくいきません。どうしてでしょうか。  
下はソースです。

[code]

    <script type="text/javascript">
    /地域セレクトボックスイベント設定
    setHierarchySelectEvent('#area1', '#area2');
    setHierarchySelectEvent('#area2', '#area3');
    //セレクトボックスの初期値
    $('#area1').val('1').change();
    $('#area2').val('2').change();
    $('#area3').val('2').change();
    
    /**
     * 階層のあるプルダウンのイベントを設定します.
     * 親のselectタグには属性data-subgroupが設定されている必要があります。
     * 子のselectタグには属性data-groupが設定されている必要があります。
     * @param parentSelect 親となるselectタグのセレクタ
     * @param childSelect 子となるselectタグのセレクタ
     */
    function setHierarchySelectEvent(parentSelect, childSelect){
        var initCategorySmallHtml = $(childSelect).html();
        $(parentSelect).change(function(){
            if( 1 < $(this).find('option:selected').length ){
                $(childSelect).find("option").each(function(index, element){
                    $(element).remove();
                });
            }else{
                var subgroup =  $(this).find('option:selected').attr('data-subgroup');
                $(childSelect).html(initCategorySmallHtml);
                $(childSelect).find("option").each(function(index, element){
                    var group = $(element).attr('data-group');
                    if( group ){
                        if( subgroup == group ){
                            //$(element).css('display', 'block');//IEではoptionタグに対してdisplayは効かないため
                        }else{
                            //$(element).css('display', 'none');//IEではoptionタグに対してdisplayは効かないため
                            $(element).remove();
                        }
                    }
                });
            }
            $(childSelect).val('').change();//未選択時の値は''じゃない場合は書き換えてね
        });
    }
    </script>
    <select name="area1" id="area1">
        <option data-subgroup="" value="">未選択</option>
        <option data-subgroup="nihon" value="1">日本</option>
        <option data-subgroup="amerika" value="2">アメリカ</option>
        <option data-subgroup="doitu" value="3">ドイツ</option>
    </select>
    <select name="area2" id="area2">
        <option data-group="" value="">未選択</option>
        <option data-group="nihon" data-subgroup="tokyo" value="1">東京</option>
        <option data-group="nihon" data-subgroup="niigata" value="2">新潟</option>
        <option data-group="nihon" data-subgroup="okinawa" value="3">沖縄</option>
        <option data-group="amerika" data-subgroup="nyu-yo-ku" value="1">ニューヨーク</option>
        <option data-group="amerika" data-subgroup="sikago" value="2">シカゴ</option>
        <option data-group="doitu" data-subgroup="kerun" value="1">ケルン</option>
    </select>
    <select name="area3" id="area3">
        <option data-group="" value="">未選択</option>
        <option data-group="tokyo" value="1">品川区</option>
        <option data-group="tokyo" value="2">港区</option>
        <option data-group="tokyo" value="3">江東区</option>
        <option data-group="niigata" value="1">新潟市</option>
        <option data-group="niigata" value="2">柏崎市</option>
        <option data-group="niigata" value="3">長岡市</option>
        <option data-group="okinawa" value="1">那覇市</option>
        <option data-group="okinawa" value="2">粟国村</option>
        <option data-group="okinawa" value="3">与那国町</option>
        <option data-group="nyu-yo-ku" value="1">ニューヨークのどこか1</option>
        <option data-group="nyu-yo-ku" value="2">ニューヨークのどこか2</option>
        <option data-group="sikago" value="1">シカゴのどこか1</option>
        <option data-group="sikago" value="2">シカゴのどこか2</option>
        <option data-group="kerun" value="1">ケルンのどこか</option>
    </select>
    
[/code]


CC BY-SA 4.0
2019-01-15T08:40:49.717
51986
2019-01-15T09:08:20.997
2019-01-15T08:48:39.040
3475
31790
question
javascript
javascript 絞り込み検索　三段階について


HTML が読まれる前に DOM 操作をしようとしています。  
スクリプトの記述位置を `</body>` の直前に移動すると、期待する結果を得られると思います。


CC BY-SA 4.0
2019-01-15T09:08:20.997
51988
2019-01-15T09:08:20.997
31716
51986
answer