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>
''
Q&A
