用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
- 用jQuery实现两个所属关系的select选项选择
- 用jQuery实现<select>选项上下移动
- 用jQuery实现<select>选项上下移动
- jQuery Mobile中选择select的data-*选项
- jQuery实现两个下拉菜单的选项互相移动效果
- 两个select之间option的互相添加操作(jquery实现)
- jquery 实现两个select之间option的转移
- jquery 操作两个select 来实现值之间的传递
- 通过jQuery实现合理的年月日选择(select>option)
- JQuery实现对select选择框的赋值
- 用JS,JQuery格式化日期或者Select标签的选项
- Jquery的select选择方法
- 禁止选择select选项
- jquery 动态添加 select 的 选项
- JQuery遍历select下拉选项的方法
- jquery获取select选项option的值
- 根据所选择的select选项实现内容的动态添加与组合
- 关于最多只能选择两个多选框的jQuery功能实现
- 学习php的第一个实例--留言簿及管理系统
- CLASSPATH、JAVA_HOME的作用
- App Tune-up Kit工具的安装和操作
- Linux下php添加新扩展
- 那些复杂的列表总要弄个清楚——(四)激动人心的BaseAdapter之二
- 用jQuery实现两个所属关系的select选项选择
- 最近回味SSH框架,发现同事的小bug NoSuchMethod $Proxy.add(), 解决办法和根本原因
- sublime text快捷键列表
- ZeroClipboard2.2.0版本跨浏览器复制(兼解决IE下兼容问题)
- windows下多个git账号配置并且将本地仓库项目推送到远程仓库
- 在Linux下编译php扩展
- Shiro第一篇【Shiro的基础知识、回顾URL拦截】
- 移位运算符
- 话android动画