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. ...
随机推荐
- 一起来啃书——PHP看书
形式所迫,不得不开展android的学习,PHP这边也开始了啃书的日子.两部500+的书,45天够不,有点忙有点忙... 早上的胃胀,简直是一记闷棍,长点儿记性吧........ 1.PHP+MYSQ ...
- POJ 1228 Grandpa's Estate --深入理解凸包
题意: 判断凸包是否稳定. 解法: 稳定凸包每条边上至少有三个点. 这题就在于求凸包的细节了,求凸包有两种算法: 1.基于水平序的Andrew算法 2.基于极角序的Graham算法 两种算法都有一个类 ...
- CF 375B Maximum Submatrix 2[预处理 计数排序]
B. Maximum Submatrix 2 time limit per test 2 seconds memory limit per test 512 megabytes input stand ...
- NOIP2000进制转换
题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 1*10^2+2*10^1+3*10^ ...
- 在公司内网上创建自己的 OSM.Planet 街道级别地图服务器及其客户端程序
转自我的BLOG http://blog.csdn.net/goldenhawking/article/details/6402775 最近经过陛下点拨,涉猎了“OpenStreetMap”,做了不 ...
- python pip install mysql-connector-python
sudo pip install mysql-connector-python 报错信息:Collecting mysql-connector-python Could not find a vers ...
- VS中的jQuery
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式.1. attr( 属性名 ...
- django复习笔记3:urls/views/templates三板斧
0.先看看文件结构 mysite/ mysite/ ├── __pycache__ │ └── manage.cpython-.pyc ├── blog │ ├── __init__.py │ ...
- 弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
- BZOJ 1066 【SCOI2007】 蜥蜴
Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为$1$,蜥蜴的跳跃距离是d,即蜥蜴可以跳 ...