下拉框<select name=”makemodule” id=”makemodule” style=’width:130px’
onchange=’makemoduleSelected()’>
<option value=’1′>1</option>
</select>

<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>

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>标签回发就足以了。 

动态加载select下拉框的完成格局有那个,在接下去的小说中为大家介绍下jquery是何许兑现的
如题,直接…

jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax格局猎取勾选项列表,再把列表内的选项打上。

//获取模板选项
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();
}
%>

select改造,触发函数makemoduleSelected(),该函数如下:

地点的sql语句将收取多少个值,分别为select下拉框的突显值和真值,套个<option>标签回发就足以了。

//模板下拉框产生变化时,触发那件事件(onchange)。
function makemoduleSelected(){
clearAll(‘property’);
var modtitlecode = $(“#makemodule”).val();
$.ajax({
url : ‘indexStatisticsAction_getSelect.jsp’,
data: {
page:’clientindexStatistics.jsp’,method:’get_subname_en’,modtitlecode:modtitlecode},
success : function(result){
// 依据result重返音信推断是否登陆成功
var results = result.split(“,”);
//document.getElementById(results[i]).checked = true;
$(“.indexStatistics”).each(function(){
$(this).find(“input”).each(function(){
var tempVal = $(this).val();
for(var i=0; i<results.length; i++){
if(tempVal == results[i]) $(this).attr(“checked”, true);
}
});
});
}
});
}

复制代码 代码如下: