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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
javascript读写json示例
Apr 11 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 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
zend framework多模块多布局配置
2011/02/26 PHP
php邮件发送的两种方式
2020/04/28 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
AngularJS入门之动画
2016/07/27 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
syb养殖创业计划书
2014/01/09 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
创业计划书之家政服务
2019/09/18 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python