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

来源:互联网 发布:c windows syswow64 编辑:程序博客网 时间:2024/06/03 09:20
<!-- 父选项 --><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>



阅读全文
0 0