<%@ 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. [Modern OpenGL系列(三)]用OpenGL绘制一个三角形

    本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/51347008 在上一篇文章中已经介绍了OpenGL窗口的创建.本文接着说如 ...

  2. 第9章 Shell基础(2)_Bash基本功能

    3. Bash的基本功能 3.1 历史命令与命令补全 (1)历史命令:#history [选项] [历史命令保存文件] ①选项:-c:清空历史命令: -w:把缓存中的历史命令写入文件~/.bash_h ...

  3. VS2015编译boost1.62

    VS2015编译boost1.62 Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有 ...

  4. C++ string

    C++ string best practices => LPTSTR, PSTR, CString, _T, TEXT, Win32 API, Win16. string, wstring. ...

  5. 使用 Promises 编写更优雅的 JavaScript 代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...

  6. JS字符串转换成json对象。。。。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 点击li,点击的li添加class,其余去掉class

    点击li,点击的li添加class,其余去掉class <script type="text/javascript"> $(function () { var liob ...

  8. 加密解密(11)HMAC-在sha1,md5基础上加密

    HMAC: Hash-based Message Authentication Code http://baike.sogou.com/v10977193.htm http://www.baike.c ...

  9. .net闭包的应用

    这里体现出闭包的数据共享 , , , , , , , , , }; ; ; values.ToList().ForEach(s => result1 += s); values.ToList() ...

  10. 标准的最大margin问题

    standard large margin problem 分割线