当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 解决Jquery下拉框数据动态获取的问题

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

2018年01月29日  | 移动技术网IT编程  | 我要评论

废话不多说,直接上源码:

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网