<%@ 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. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

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

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

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

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

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

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  6. Bootstrap3系列:按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  7. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  8. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  9. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

随机推荐

  1. wifi的country code

    转自:http://userpage.chemie.fu-berlin.de/diverse/doc/ISO_3166.htmlCountry A 2 A 3 Number ------------- ...

  2. 艺萌文件上传下载及自动更新系统(基于networkComms开源TCP通信框架)

    1.艺萌文件上传下载及自动更新系统,基于Winform技术,采用CS架构,开发工具为vs2010,.net2.0版本(可以很容易升级为3.5和4.0版本)开发语言c#. 本系统主要帮助客户学习基于TC ...

  3. 使用Openswan接入Windows Azure Site to Site VPN

    Winodows Azure的Site to Site VPN支持主流的防火墙和路由器等接入设备.具体型号和系列请参考下表: VENDOR DEVICE FAMILY MINIMUM OS VERSI ...

  4. DataTable to byte[]、DataTable to XML(string)

    DataTabe 对象在很多地方都会用到,特别是在Web Service.Socket等需网络传输的地方. 但是在有些地方,如果直接传递的话,程序可能会报告DataTable无法序列化错误. 解决问题 ...

  5. java 字节数组转int

    4字节数组转int类型 小端模式 /** * 数组转int类型 * * @param src * @return */ public static int bytesToInt(byte[] src) ...

  6. 爬虫技术 -- 基础学习(五)解决页面编码识别(附c#代码)

    实现从Web网页提取文本之前,首先要识别网页的编码,有时候还需要进一步识别网页所使用的语言.因为同一种编码可能对应多种语言,例如UTF-8编码可能对应英文或中文等语言. 识别编码整体流程如下: (1) ...

  7. Spark GraphX学习资料

    <Spark GraphX 大规模图计算和图挖掘> http://book.51cto.com/art/201408/450049.htm http://www.csdn.net/arti ...

  8. setInterval setTimeout clearInterval

    setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...

  9. Codeforces Round #135 (Div. 2) E. Parking Lot 线段数区间合并

    E. Parking Lot time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  10. 【练习】trace文本重建控制文件

    这个小练习是针对控制文件全部丢失后怎么能快速的重建一个控制文件,快速的起库 1.备份控制文件到trace下 SQL> alter database backup controlfile to t ...