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

<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>