<!-- 父选项 -->
<select id="prefectureNm" name="prefectureNm" class="select_large" size="1">
<option th:each="job : ${prefectureInfoList}" th:value="${job.prefectureCd}" th:selected="${job.prefectureCd == prefectureCd}" th:inline="text" th:class="${job.prefectureCd}">[[${job.prefectureNm}]]</option>
</select>
<!-- 子选项 -->
<select id="syzNm" name="syzNm" class="select_large" size="1">
<option value="" selected="selected" class="msg">-</option>
<option value="test">test</option>
<option th:each="SyzList : ${SyzInfoAllList}" th:value="${SyzList.syzCd}" th:selected="${SyzList.syzCd == syzCd}" th:inline="text" th:class="${SyzList.prefectureCd}">[[${SyzList.syzNm}]]</option>
</select>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(function() {
// 都道府県名が変更されたら発動
$('select[name="prefectureNm"]').change(function() {
// 選択されている都道府県のクラス名を取得
var prefectureName = $('select[name="prefectureNm"] option:selected').attr("class");
// 都市名の要素数を取得
var count = $('select[name="syzNm"]').children().length;
// 都市名の要素数分、for文で回す
for (var i=0; i<count; i++) {
var syzNm = $('select[name="syzNm"] option:eq('+i+')');
if(syzNm.attr("class") === prefectureName) {
// 選択した都道府県と同じクラス名だった場合
syzNm.show();
}else {
syzNm.hide();
}
}
})
})
/*]]>*/
</script>
<script th:inline="javascript">
/*<![CDATA[*/
$(function() {
// 都道府県が変更されたら発動
$('select[name="prefectureNm"]').change(function() {
// 選択されている都道府県のクラス名を取得
var prefectureCd = $('select[name="prefectureNm"] option:selected').attr("class");
// 市区群の要素をいったんすべて削除
$('#syzNm option').remove();
// 市区群デフォルト値設定
var $optionDefault = $('<option>')
.val("")
.text("-")
.prop('selected', true);
$('#syzNm').append($optionDefault);
var url = /*[[${@environment.getProperty('api.base.url')}]]*/
url = url +'/GetSyzListService/' + prefectureCd;
$.getJSON(url,
function(json) {
//JSONはeachメソッドに引数で渡します。
$.each(json, function( num, obj) {
var $option = $('<option>')
.val(obj.syzCd)
.text(obj.syzNm)
.prop('selected', false);
$('#syzNm').append($option);
});
}
);
//初期設定用にロード時の親選択状態で1度イベント起動させとく
// $('select[name="prefectureNm"]').trigger('change');
})
})
function _isIE() {
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/)) {
return true;
}
return false;
}
/*]]>*/
</script>