jquery动态加载select下拉框示例代码


Posted in Javascript onDecember 10, 2013

如题,直接上代码,实战学习。

<head><title>jquery实现动态加载select下拉选项</title> 
<script type="text/javascript"> 
function init(){ 
makemoduleSelect(); 
} 
//加载模板下拉框选项 
function makemoduleSelect(){ 
$.ajax({ 
url : 'indexStatisticsAction_getSelect.jsp', 
data: { page:'clientindexStatistics.jsp',method:'get_modtitlecode'}, 
success : function(result){ 
$("#makemodule").append(result); 
} 
}); 
}</script> 
</head> 
<body onload="init()"> 
下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'> 
<option> ------- </option> 
</select></body>

以上html被加载时,由于body标签里面设置了onload属性,则其对应的javascript函数会运行,最后到 function makemoduleSelect(),再来看看这个函数:

url属性,类似于AJAX的跳转url,这里我用了同一个路径下的jsp页面(indexStatisticsAction_getSelect.jsp),下面会再展示;
data属性,将作为请求的参数,由request获取;
success属性,表示该jquery的ajax请求成功返回后将执行的代码,这里的$("#makemodule")指的是下拉框。

下面是ajax请求的url所对应的jsp,这里删掉了JDBC相关的包,自行引入嘛,JDBC的就不多说了,根据需要把业务逻辑码出来吧。

<%@ page import="java.util.*"%> 
<%@ page import="java.sql.ResultSet"%> 
<%@ page import="java.io.PrintWriter"%> 
<% 
String userId = (String) session.getAttribute("userid"); 
String method = request.getParameter("method"); 
String fromPage = request.getParameter("page"); 
String sql1 = "select modtitlename,modtitlecode from makemodule where userid = '?userId?' and modulename_en='?modulename_en?' group by modtitlename "; 
System.out.println("---getting select_option from:"+fromPage+"----" + new Date()); //获取模板选项 
if(method.equals("get_modtitlecode")){ 
String sql = sql1.replace("?userId?",userId); 
if(fromPage.equals("acindexStatistics.jsp")){ 
sql = sql.replace("?modulename_en?","acsta"); 
}else if(fromPage.equals("apindexStatistics.jsp")){ 
sql = sql.replace("?modulename_en?","apsta"); 
}else if(fromPage.equals("clientindexStatistics.jsp")){ 
sql = sql.replace("?modulename_en?","terminalsta"); 
} 
System.out.println(sql); 
StringBuffer rsOption = new StringBuffer(); 
Db db = new Db(); 
try { 
db.prepareQuery(); 
ResultSet rs = db.executeQuery(sql); 
while (rs!=null && rs.next()) { 
rsOption.append("<option value='"+rs.getString("modtitlecode")+"'>"+StringOperator.ISO2GB(rs.getString("modtitlename"))+"</option>"); 
} 
rs.close(); 
} catch (Exception e) { 
e.printStackTrace(); 
} finally { 
db.endQuery(); 
} 
PrintWriter pout = response.getWriter(); 
pout.write(rsOption.toString()); 
pout.flush(); 
pout.close(); 
} 
%>

上面的sql语句将取出两个值,分别为select下拉框的显示值和真值,套个<option>标签回发就可以了。
Javascript 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
关于jquery中全局函数each使用介绍
Dec 10 #Javascript
jquery对ajax的支持介绍
Dec 10 #Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 #Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 #Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 #Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 #Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php生成二维码
2015/08/10 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
python解析xml文件操作实例
2014/10/05 Python
Python语法快速入门指南
2015/10/12 Python
Python网站验证码识别
2016/01/25 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
计算机科学与技术应届生求职信
2013/11/07 职场文书
干部培训自我鉴定
2014/01/22 职场文书
教师绩效工资方案
2014/02/01 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
大四毕业生自荐书
2014/07/05 职场文书
课外活动总结
2015/02/04 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技