解决Jquery下拉框数据动态获取的问题
时间:2019-04-13
本文章向大家介绍解决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下拉框数据动态获取的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- android中一些特殊字符(如:←↑→↓等箭头符号)的Unicode码值
- 基于SpringBoot的任务管理平台v1.0正式发布
- 大数据系统的Lambda架构
- AKKA中的事件流
- Java初涉感悟
- Android 6.0 Permission权限与安全机制
- SpringBoot工作机制
- Android权限管理PermissionsDispatcher2.3.2使用+原生6.0权限使用
- SpringBoot中的IoC
- Sonar安装配置
- 《AngularJS深度剖析与最佳实践》推荐序
- JavaScript递归方法 生成 json tree 树形结构数据
- springboot使用hibernate validator校验
- 机器学习(三) ——k-近邻算法基础
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法