这次给大家带来jquery下拉框数据动态获取该如何实现，jquery下拉框数据动态获取实现的注意事项有哪些，下面就是实战案例，一起来看一下。
废话不多说，直接上源码：
select.jsp
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<base href="<%=basepath%> rel=external nofollow >
<title>my jsp 'select.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
function get_app_type() {
$.ajax({
type: post,
url: apptypeshow.action, //获取json数据
datatype: json,
success: function(data) {
var d = eval(( + data + ));
for(var i = 0; i < d.length; i++) {
var id = d[i].id;
var name = d[i].name;
var opt = "<option value='" + id + "'> + name + </option>;
$(#apptype).append(opt);
}
},
error: function() {
alert(系统异常，请稍后再试！)
}
});
}
function get_app_class() {
$.ajax({
type: post,
url: appclassshow.action,
datatype: json,
success: function(data) {
var d = eval(( + data + ));
for(var i = 0; i < d.length; i++) {
var id = d[i].id;
var name = d[i].name;
var opt = "<option value='" + id + "'> + name + </option>;
$(#appclass).append(opt);
}
},
error: function() {
alert(系统异常，请稍后再试！)
}
});
}
$(document).ready(function() {
get_app_type();
get_app_class();
});
</script>
</head>
<body>
<table>
<tr>
<td align="right">app类型:</td>
<td align="left">
<select name="apptype" id="apptype"
style="margin-left: 16px; height: 30px; width: 110px; text-align: left; size: 3; color: #505050;">
<option value="-1">---请选择---</option>
</select>
</td>
</tr>
<tr height="25px"><td> </td></tr>
<tr>
<td align="right">app种类:</td>
<td align="left">
<select name="appclass" id="appclass"
style="margin-left: 16px; height: 30px; width: 110px; text-align: left; size: 3; color: #505050;">
<option value="-1">---请选择---</option>
</select>
</td>
</tr>
</table>
</body>
</html>
struts.xml
<?xml version="1.0" encoding="utf-8" ?>
<!doctype struts public "-//apache software foundation//dtd struts configuration 2.1//en" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
<package name="simpleton" extends="struts-default,json-default">
<action name="*jsonaction" method="{1}"
class="jquery.chisj.action.jsonaction">
<result name="fail">error.jsp</result>
<result type="json">
<param name="root">result</param>
</result>
</action>
<action name="apptypeshow"
class="jquery.chisj.action.ntappaction"
method="apptypeshow">
<result name="fail">error.jsp</result>
<result type="json">
<param name="root">result</param>
</result>
</action>
<action name="appclassshow"
class="jquery.chisj.action.ntappaction"
method="appclassshow">
<result name="fail">error.jsp</result>
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>
ntappaction.java
/**
*
*/
package jquery.chisj.action;
import java.util.arraylist;
import java.util.list;
import jquery.chisj.entity.appclass;
import jquery.chisj.entity.apptype;
import com.opensymphony.xwork2.actionsupport;
import net.sf.json.jsonarray;
/**
* @classname: ntappaction
* @description: todo
* @author: chisj chisj@foxmail.com
* @date 2016年1月20日 下午4:53:50
*/
public class ntappaction extends actionsupport {
private string result;
public string apptypeshow() {
system.out.println(---app type show---);
list<apptype> apptypelist = new arraylist<apptype>();
try {
apptype apptype_1 = new apptype();
apptype apptype_2 = new apptype();
apptype_1.setid(short.valueof(1));
apptype_1.setname(android);
apptype_2.setid(short.valueof(2));
apptype_2.setname(ios);
apptypelist.add(apptype_1);
apptypelist.add(apptype_2);
jsonarray jsonarray = jsonarray.fromobject(apptypelist);
result = string.valueof(jsonarray);
} catch (exception e) {
e.printstacktrace();
}
return success;
}
public string appclassshow() {
system.out.println(---app class show---);
list<appclass> appclasslist = new arraylist<appclass>();
try {
appclass appclass_1 = new appclass();
appclass appclass_2 = new appclass();
appclass_1.setid(short.valueof(1));
appclass_1.setname(种类1);
appclass_2.setid(short.valueof(2));
appclass_2.setname(种类2);
appclasslist.add(appclass_1);
appclasslist.add(appclass_2);
jsonarray jsonarray = jsonarray.fromobject(appclasslist);
result = string.valueof(jsonarray);
} catch (exception e) {
e.printstacktrace();
}
return success;
}
public string getresult() {
return result;
}
public void setresult(string result) {
this.result = result;
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery与vue做出拖动验证的验证码效果
$.ajax()怎样从服务器获取json数据
以上就是jquery下拉框数据动态获取该如何实现的详细内容。