<%@ 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表单,文本框,下拉菜单三级联动练习代码的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  2. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  3. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

  4. ExtJs 下拉菜单分页工具插件 代码分析

    Ext.ns("Ext.ux"); //创建插件对象 Ext.ux.PageSizePlugin = function(){ //调用父对象的构造方法,并为此插件生成一个预定义st ...

  5. html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果

    <select>     下拉 <select>下有很多属性 name        其实有name就有value了,因为button提交的都是? name=value的格式, ...

  6. .Net Core使用视图组件(ViewComponent)封装表单文本框控件

    实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: <form class=&quo ...

  7. Chrome表单文本框自动填充黄色背景色样式

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  8. javascript:让表单 文本框 只读,不可编辑的方法

    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...

  9. [Swift通天遁地]二、表格表单-(15)自定义表单文本框内容的格式

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. 对vector&lt;int&gt;进行快速排序

    #include <iostream>#include <string>#include <vector>using namespace std;void Quic ...

  2. Android的px、dp和sp

    Android的px.dp和sppx: 即像素,1px代表屏幕上一个物理的像素点:偶尔用到px的情况,是需要画1像素表格线或阴影线的时候. dp: 这个是最常用但也最难理解的尺寸单位.它与“像素密度” ...

  3. Java中设置classpath、path、JAVA_HOME的作用

    Thinking in Java对classpath作用的解释 Java 解释器的工作程序如下: 首先,它找到环境变量CLASSPATH(将Java 或者具有Java 解释能力的工具——如浏览器——安 ...

  4. SDOI2008Cave 洞穴勘测

    无限膜拜CLJ大牛…… 不会动态树的弱弱在CLJ的帮助下AC了此题 我想到了并查集(人人都会想到的吧……囧),但不知道应该如何处理destroy操作…… 其实 make操作的实质就是:把x节点到其所在 ...

  5. 【Android 复习】:Android五种布局的使用方法

    ---恢复内容开始--- 在Android布局中,有五种常用的布局,下面我们就来学习一下这几种布局的使用方式 1) 线性布局:LinearLayout 2) 帧布局:  FrameLayout 3)  ...

  6. HTTP 500 - 内部服务器错误

    问题1 问:当调试程序出错的时候,为什么有的机器总是出现“HTTP 错误 500.100 - 内部服务器错误 - ASP 错误”,而不能显示具体的出错信息? 原因: IE浏览器设置中屏蔽掉了出错的具体 ...

  7. ubuntu开机黑屏

    以下皆在VM虚拟机下 (1)ctr+alt+f4 进入命令行 (2) sudo apt-get update sudo apt-get install xserver-xorg-lts-quantal ...

  8. InnoDB 数据表压缩原理与限制

    http://liuxin1982.blog.chinaunix.net/uid-24485075-id-3523032.html 压缩理念 通过提高CPU利用率和节约成本,降低数据库容量及I/O负载 ...

  9. Sum

    Problem Description XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are ...

  10. Unicode-字符编码的历史由来(转)

    http://www.nowamagic.net/internet/internet_CharsetHistory.php 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以 ...