登录  /  注册
首页 > web前端 > js教程 > 正文

Jquery下拉框数据动态获取该如何实现

php中世界最好的语言
发布: 2018-03-15 09:51:23
原创
1838人浏览过

这次给大家带来Jquery下拉框数据动态获取该如何实现,Jquery下拉框数据动态获取实现的注意事项有哪些,下面就是实战案例,一起来看一下。

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

select.jsp


nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 
 <base>" rel="external nofollow" &gt;
 <title>My JSP 'select.jsp' starting page</title><meta><meta><meta> 
	<meta><meta><!--
	<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
	--><script></script><script>	
		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=&#39;" + id + "&#39;>" + name + "";
						$("#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=&#39;" + id + "&#39;>" + name + "";
						$("#appClass").append(opt);
					}
				},
				error: function() {
					alert("系统异常,请稍后再试!")
				}
			});		
		}	
		$(document).ready(function() {		
			get_app_type();
			get_app_class();			
		});
	</script>
 
 
 
登录后复制
   
APP类型:
 
APP种类:
 

struts.xml

<?xml  version="1.0" encoding="UTF-8" ?>nbsp;struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"&gt;
<struts><constant></constant><package><action class="jquery.chisj.action.JsonAction"><result>error.jsp</result><result><param>result
			</result></action><action class="jquery.chisj.action.NtAppAction" method="appTypeShow"><result>error.jsp</result><result><param>result
			</result></action><action class="jquery.chisj.action.NtAppAction" method="appClassShow"><result>error.jsp</result><result><param>result
			</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;
	}	
}</appclass></appclass></apptype></apptype>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery与vue做出拖动验证的验证码效果

$.ajax()怎样从服务器获取json数据

以上就是Jquery下拉框数据动态获取该如何实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号