解决Jquery下拉框数据动态获取的问题

2019-11-19 14:28:43

字体：大中小

来源：转载

供稿：网友

废话不多说，直接上源码：

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下拉框数据动态获取的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

下一篇：vue引入新版 vue-awesome-swiper插件填坑问题