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. ...
随机推荐
- 笔记:html 拾遗之一
html 拾遗之一 今天翻了下w3schools.com 把忘掉的语法记一下(仅常用但是不熟的部分) img alt 属性,当图片无法显示时可显示alt属性的文字 br 换行 < html la ...
- [转]阿里云配置mysql远程连接
默认是不能用客户端远程连接的,阿里云提供的help.docx里面做了设置说明,mysql密码默认存放在/alidata/account.log 首先登录: mysql -u root -h local ...
- 08章 分组查询、子查询、原生SQL
一.分组查询 使用group by关键字对数据分组,使用having关键字对分组数据设定约束条件,从而完成对数据分组和统计 1.1 聚合函数:常被用来实现数据统计功能 ① count() 统计记录条数 ...
- HTML5 WebSocket 技术介绍
WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...
- Hibernate一对一关系映射
Hibernate提供了两种一对一映射关联关系的方式: 1)按照外键映射 2)按照主键映射 下面以员工账号表和员工档案表(员工账号和档案表之间是一对一的关系)为例,介绍这两种映射关系,并使用这两种 映 ...
- noip模拟赛（一）宠物之战
宠物之战 (senso.pas/c/cpp) [问题描述] 众所周知,moreD的宠物已经被moreD奴役得体无完肤.这只宠物实在忍无可忍,把自己每天走魔法树的经历告诉了自己的宠物.同时他还说明了自己 ...
- 全面解读python web 程序的9种部署方式
转载自鲁塔弗的博客,本文地址http://lutaf.com/141.htm python有很多web 开发框架,代码写完了,部署上线是个大事,通常来说,web应用一般是三层结构 web serve ...
- js Dialog 去掉右上角的X关闭功能
用到 dialog弹出框时,不想要右上角的X 关闭功能,只是做个提示信息显示,下面是具体的去掉方法,大家可以参考下 再用到 dialog弹出框时,不想要右上角的X 关闭功能,只是做个提示信息显示. 在 ...
- asp.net(c#) Color颜色的转换
1.在.net中如何把一个色名称转换成HTML色? System.Drawing.Color color = System.Drawing.Color.White; string s = string ...
- 50个查询系列-第13个查询：把“SC”表中“叶平”老师教的课的成绩都更改为此课程的平均成绩；
UPDATE tblscore SET tblscore.Score= ( -- 这里开始算叶平的平均值 SELECT AVG(tt.aa) FROM ( SELECT tblscore.Score ...