用jQuery实现两个所属关系的select选项选择

<!-- 父选项 -->
<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>