Bootstrap+jfinal实现省市级联下拉菜单


Posted in Javascript onMay 30, 2016

小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用。

Bootstrap+jfinal实现省市级联下拉菜单

这只是一个基础版,后续还要再进行优化。

代码:省市级关联菜单下载地址

说明:

sql语句就不再说了,里面有“city.sql”、“provincial.sql”两个文件。

1、先说说获取数据

public void initProcitys() {
 logger.info("获取所在地区");
 List<Provincials> provincials = Provincials.me.getProvincials();
 for (Provincials provincial : provincials) {
 List<Citys> citys = Citys.me.getCitysByProvincialId(provincial.getLong("id"));
 provincial.put("citys", JsonKit.toJson(citys));
 }
 setAttr("provincials", provincials);
 render("procity.jsp");
}

1). 先获取所有的省级菜单。
2). 根据省级id获取对应的市级菜单。
3). 在获取市级菜单的时候,注意把list转换为json数据,这里使用了JackJson.

2、说说页面布局

<select name="province_code" id="province_select">
 <c:forEach items="${provincials}" var="item">
 <option value="${item.procode}" cdata='${item.citys}'>${item.proname}</option>
 </c:forEach>
</select>
<select name="city_code" id="city_select">
</select>

1). 使用了两个select,还没有加式样
2). 使用foreach先对省级菜单进行初始化,同时将其city数据绑定到cdata属性上。

3、说说js实现

$(function() {
 provincialChange();
 var $provincial = $("#province_select");
 $provincial.change(provincialChange);
});
function provincialChange() {
 var $provincial = $("#province_select");
 // 省级显示的code值
 var provincial_code = $provincial.val();
 var $selectedOption = $('#province_select option[value=' + provincial_code + ']');
 var city_data = YUNM.jsonEval($selectedOption.attr("cdata"));
 // 市级的菜单列表
 $city_select = $("#city_select");
 $city_select.empty();
 for (var i = 0; i < city_data.length;i++ ) {
 var code = city_data[i].code;
 var cname = city_data[i].cname;
 $city_select.append("<option value='"+code+"'>"+cname+"</option>");
 }
}

1). 页面初始化加载和省级菜单切换时,需要对市级菜单进行加载
2). 先拿到省级菜单,获取当前value,然后根据value获取option
3). 从option中获取市级数据,注意要使用eval对数据转换,具体原因可以度娘,主要是加上 ()。
4.) 循环遍历市级菜单,进行输出显示

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap程序设计有所帮助。

Javascript 相关文章推荐
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 #Javascript
基于Angularjs实现分页功能
May 30 #Javascript
AngularJs实现分页功能不带省略号的代码
May 30 #Javascript
JS组件Bootstrap Select2使用方法解析
May 30 #Javascript
You might like
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
测试php函数的方法
2013/11/13 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之print详解
2014/09/28 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
python实现八大排序算法(2)
2017/09/14 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
pip install命令安装扩展库整理
2021/03/02 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书