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. ...
随机推荐
- cuda中thread id
//////////////////////////////////////////////////////////////////////////// // // Copyright 1993-20 ...
- 【温故而知新-Javascript】使用 Ajax
Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...
- jmeter的压力测试
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试. 以下为压力测试的简单介绍 1.在测试计划下增加一个线程组 2.线程组的内容需要进行编辑,根据压力测 ...
- webstorm的中文教程和技巧分享
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享.webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.c ...
- 学习cocos 空程序
今天开始学习cocos代码,首先研究源码中的空程序. 在这个程序中,在main函数中,创建了一个Application: int APIENTRY _tWinMain(HINSTANCE hInsta ...
- iOS ARC内存管理
iOS的内存管理机制,只要是iOS开发者,不管多长的时间经验,都能说出来一点,但是要深入的理解.还是不简单的.随着ARC(自动管理内存)的流行.iOS开发者告别了手动管理内存的复杂工作.但是自动管理内 ...
- MySQL迁移[转]
http://dbarobin.com/2015/09/15/migration-of-mysql-on-different-scenes/ MySQL 迁移方案概览 MySQL 迁移无非是围绕着数据 ...
- html之marquee详解
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...
- zabbix常用术语
zabbix常用术语
- C#执行Javascript代码的几种方法
一.开源项目 Javascript .NET 地址: http://javascriptdotnet.codeplex.com/ 它是Google Chrome V8引擎在.NET上的封装,功能完善, ...