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 相关文章推荐
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
JavaScript获取路径设计源码
May 22 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
php 调试利器debug_print_backtrace()
2012/07/23 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python3几个常见问题的处理方法
2019/02/26 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python retrying模块的使用方法详解
2019/09/25 Python
python异常处理try except过程解析
2020/02/03 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
集体备课反思
2014/02/12 职场文书
经理助理岗位职责
2014/03/05 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年人事科工作总结
2014/11/19 职场文书
银行招聘自荐信
2015/03/06 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python