Easyui表单,文本框,下拉菜单三级联动练习代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试表单</title>
<script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
<script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body>
<script type="text/javascript"> $(function(){ $("#fm").panel({
width:300,
height:400,
title:'登录框'
}); $("#bt").linkbutton({
width:100
});
$('#bt').click(function(){
$("#myform").form('submit');
return false;
}); $("#myform").form({
url:'TestSubmit',
onSubmit:function(){
//alert('表单测试');
var isValid = $(this).form('validate');
if(!isValid)
{
$.messager.show({title:'信息',msg:'输入有误'});
return false
}
},
novalidate:false,
success:function(data){ var data = eval('('+ data + ')');
if(data.success == true)
{
$.messager.show({title:'信息', msg:data.message});
}
alert(data.message);
}
}); }); </script>
<div id="fm">
<form id="myform">
<table> <tr>
<td>用户名称:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'length[2,5]'"></td>
</tr>
<tr>
<td>用户邮箱:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'email',missingMessage:'dddd'"></td>
</tr>
<tr>
<td>用户主页:</td>
<td><input class="easyui-textbox"
data-options="required:false,validType:'url',invalidMessage:'xxxx',iconCls:'icon-search',prompt:'http://开头'"></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'length[6,10]',type:'password'"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-numberbox"
data-options="required:true,max:90"></td>
</tr>
<tr>
<td>工资:</td>
<td><input class="easyui-numberbox"
data-options="required:true,max:10000,prefix:'$',precision:2"></td>
</tr>
<tr>
<td>日期:</td>
<td><input class="easyui-datebox"
data-options="required:true,editable:false"></td>
</tr>
<tr>
<td>时间:</td>
<td><input class="easyui-datetimebox"
data-options="required:true,editable:false"></td>
</tr>
<tr>
<td>城市:</td>
<td><select class="easyui-combobox" style="width:100px;"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option> </select></td>
</tr>
<tr>
<td>城市1:</td>
<td><input id="yiji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',
textField:'name',
url:'jsonMembers?pid=0',
editable:false,
value:-1,
onSelect: function(rec){ var url = 'jsonMembers?pid='+rec.id;
$('#erji').combobox('setValue','-1');
$('#erji').combobox('reload', url);
$('#sanji').combobox('setValue','-1');
$('#sanji').combobox('reload','jsonMembers');
}" >
</td>
</tr>
<tr>
<td>城市2:</td>
<td><input id="erji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',textField:'name',editable:false,
value:'未选择',
onSelect: function(rec){
var url = 'jsonMembers?pid='+rec.id;
$('#sanji').combobox('setValue','-1');
$('#sanji').combobox('reload', url);
}" >
</td>
</tr>
<tr>
<td>城市3:</td>
<td><input id="sanji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',textField:'name',editable:false,value:'未选择'" >
</td>
</tr>
<tr>
<td colspan="2" align="center"><a href="#" id="bt">提交</a></td>
</tr>
</table> </form>
</div> </body>
</html>
Servlet
package com.hanqi; import java.io.IOException;
import java.util.ArrayList; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; /**
* Servlet implementation class jsonMembers
*/
@WebServlet("/jsonMembers")
public class jsonMembers extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public jsonMembers() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//接收地区父id
String pid = request.getParameter("pid"); //防止直接运行该页
if(pid == null || pid.trim().length() == 0)
{
pid = "-1";
} try {
//声明Member的集合类
ArrayList<Member> arr; //实例化数据库操作类
AreaDao ad = new AreaDao(); //调用查询方法,获得数据库记录
arr = ad.selArea(Integer.parseInt(pid)); //声明要向前台输出的字符串
String str = ""; //如果没有查到记录
if(arr == null)
{
//实例化ArrayList
arr = new ArrayList<Member>();
} //实例化实体类
Member m = new Member(); //添加未选择时显示的内容
m.setId(-1);
m.setName("未选择");
arr.add(0,m); //将ArrayList转换成json字符串
str = JSON.toJSON(arr).toString();
//str = JSON.toJSONString(arr); //向前台输出json字符串
response.getWriter().print(str); }catch (Exception e) { response.getWriter().append(e.getMessage());
} //response.getWriter().append("Served at: ").append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
Easyui表单,文本框,下拉菜单三级联动练习代码的更多相关文章
- 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
- ExtJs 下拉菜单分页工具插件 代码分析
Ext.ns("Ext.ux"); //创建插件对象 Ext.ux.PageSizePlugin = function(){ //调用父对象的构造方法,并为此插件生成一个预定义st ...
- html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果
<select> 下拉 <select>下有很多属性 name 其实有name就有value了,因为button提交的都是? name=value的格式, ...
- .Net Core使用视图组件(ViewComponent)封装表单文本框控件
实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: <form class=&quo ...
- Chrome表单文本框自动填充黄色背景色样式
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...
- javascript:让表单 文本框 只读，不可编辑的方法
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...
- [Swift通天遁地]二、表格表单-(15)自定义表单文本框内容的格式
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- Win7虚拟机无法打开内核设备:\\Global\\vmx86
Win7虚拟机无法打开内核设备:\\Global\\vmx86 听语音 | 浏览:16844 | 更新:2014-07-21 11:21 | 标签:虚拟机 1 2 3 4 5 6 7 分步阅读 一键约 ...
- JSP第5次测试---测试分析
1. (选择一项) A: B: C: D: 解析:构造方法方法名与类名必须相同,并且没有返回值,在对象创建时被调用:可以有带参和无参的构造方法同时出现于一个类. 2. (选择一项) A: B: C: ...
- oracle plsql 捕获异常和抛出异常
在写oracle存储过程的时候很多东西放到存储过程里面比如一些判断等,要比在程序逻辑里面简单很多,但是也会涉及到捕获和抛出一样的问题. 捕获异常 语法: 首先定义异常: <异常情况> E ...
- salt基本原理
转载自: 来自:http://tech.mainwise.cn/?p=438 说明:salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器 ...
- MVC3.0 上传图片并生成缩略图
转自:http://mikelai.blog.163.com/blog/static/18411126620118771732675/ Controller: public ActionResult ...
- scala 学习笔记(04) OOP（上）主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类
一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...
- HAXM VT-X （与Hype-V冲突）
之前一直使用vs emulator. 感觉性能各方面都比较好, 但在我更新完电脑后不知道什么原因各种起不来... 无奈之下想回到Google自带的模拟器. 然后发现intel haxm一直安装失败. ...
- Java并发编程实战（使用synchronized实现同步方法）
本文介绍java最基本的同步方式,即使用synchronized关键字来控制一个方法的并发访问,如果一个对象已用synchronized关键字声明,那么只有一个执行线程允许去访问它,其它试图访问这个对 ...
- 记 FineUI 官方论坛所遭受的一次真实网络攻击！做一个像 ice 有道德的黑客！
在开始正文之前,请帮忙为当前 排名前 10 唯一的 .Net 开源软件 FineUI 投一票: 投票地址: https://code.csdn.net/2013OSSurvey/gitop/code ...
- 防止 JavaScript 自动插入分号
JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符. 然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有 ...