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

 动态加载select下拉框的实现方法有很多,在接下来的文章中为大家介绍下jquery是如何实现的

如题,直接上代码,实战学习。 
代码如下:
<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>标签回发就可以了。 

时间: 2016-12-11

jquery动态加载select下拉框示例代码的相关文章

JQuery异步加载无限下拉框级联功能实现示例

 这篇文章主要介绍了JQuery异步加载无限下拉框级联功能的实现,需要的朋友可以参考下 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/*  JQuery异步加载无限极下拉框级联功能  zjy  */  (function ($) {  $.

jquery取消选择select下拉框示例代码

 本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有三个select下拉框 一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项 这需求有点儿..........   下面是三个select:   代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">

jquery取消选择select下拉框示例代码_jquery

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码_IOS

废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

jQuery 获取和设置select下拉框的值实现代码_jquery

获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d

Ext form表单加载时 下拉框取值的问题

问题描述 Ext form表单加载时 加载的数据 后台传的的是id号,下拉框匹配的时候匹配当该id的name可是现在有个问题,当表单加载完成 下拉框的数据还没加载完成 这时下拉框显示的id,不是name只有当下拉框数据源先加载完 表单数据后加载完 才显示的是name.....有人说 给下拉框数据源添加 load事件 在load事件方法里面 给组件赋值:Ext.getCmp("组件Id").set(value).可是这个value 是form表单里jsonreade里的 我怎么能方便的取

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jquery实现省市select下拉框的替换

 本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 省市对应的实现:<还有一些没封装起来>    更具选择的省份来确定市的内容   jsp代码:    代码如下: <body>   省份<select name="prin">    <option>--请选择--</option>    <option>福建</option>

jQuery制作简洁的多级联动Select下拉框_jquery

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下:  <div class="wrap">         <div class="nice-select" name="nice-select