动态添加

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>选项</title>

<script type="text/javascript" src="js/jquery.js"></script>

<style>

    *{

        margin: 0px;

        padding: 0px;

    }

    #dv{

        width: 100px;

        height: 100px;

        background-color: yellow;

        margin: 0px auto 0px;

    }

</style>

</head>

<body>

<script>

    $(function(){

        // 添加选项

        $("#opbtn").click(function(){

            var n = $("#opts>li").size();

            if(n < 3){// 最多添加6个选项

                if(n == 1)

                    {

                        var name='按照地区名称查找';

                        $("#opts").append("<li>"+name+"<input name='area'/></li>");

                    }else if(n == 2)

                        {

                        name = '按照行政区划代码查找';

                        $("#opts").append("<li>"+name+"<input name='code'/></li>");

                        }

            }else{// 提示选项个数已经达到最大

                $("#optips").html("选项个数已经达到最大,不能再添加!");

                $("#optips").css({"color":"red"});

            }

        });

        // 删除选项

        $("#delbtn").click(function(){

            if($("#opts>li").size() <= 1){

                $("#optips").html("已经没有选项可以删除了!");

                $("#optips").css({"color":"red"});

            } else{

                // 删除选项,每次删除最后一个

                $("#opts>li").last().remove();

            }

        });

    });

    function check() {

        alert('123');

        var n = $("#opts>li").size();

        //window.location.href="a.jsp?count=" +n;

        document.form.action = "a.jsp&count=" + n;   //跳转界面并以表单的形式提交，并且出去输入框的个数

        document.form.submit();

    }

</script>

<form action="" method="post" name="form">

    <div style="margin: 50px;">

        <input id="opbtn" type="button" value="添加选项"/>

        <input id="delbtn" type="button" value="删除选项"/>

        <!-- <input id="wrapbtn" type="button" value="包围DIV"/> -->

        <button onclick="check()">点我</button>

        <ol id="opts" type="A" >

        <li>按级别查询：<input type="text" name="name"></li>

        </ol>

        <!-- 提示语 -->

        <span id="optips"></span>

    </div>

    </form>

</body>

</html>

用另一个界面获取值

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<script type="text/javascript" src="jquery.min.js"></script>

</head>

<body>

    <% String name = request.getParameter("area");

       String id = request.getParameter("name");

       String count = request.getParameter("count");

       out.print("id" + id);

       out.print("name" + name);

       out.print(count + "个");

    %>

</body>  

</body>

</html>

效果截图：

利用jQuery动态添加input输入框，并且获取他的值的更多相关文章

  1. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  2. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  4. asp.net gridview动态添加列，并获取其数据；

    1,绑定数据前先动态添加列,见方法CreateGridColumn(只在第一次加载动态添加): 2,gvlist_RowDataBound为对应列添加控件: 前台代码: <%@ Page Lan ...

  5. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  6. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  7. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  8. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

随机推荐

  1. 中小型企业级 IPS 部署

    <构建基于Snort+Guardian+Iptables的IPS> 2020年的第三天,依旧如往常写文章,分享最近做的项目继<中小型企业级防火墙部署>之后的另一部分<构建 ...

  2. Kafka 集群在马蜂窝大数据平台的优化与应用扩展

    马蜂窝技术原创文章,更多干货请订阅公众号:mfwtech Kafka 是当下热门的消息队列中间件,它可以实时地处理海量数据,具备高吞吐.低延时等特性及可靠的消息异步传递机制,可以很好地解决不同系统间数 ...

  3. 源码分析 Kafka 消息发送流程(文末附流程图)

    温馨提示:本文基于 Kafka 2.2.1 版本.本文主要是以源码的手段一步一步探究消息发送流程,如果对源码不感兴趣,可以直接跳到文末查看消息发送流程图与消息发送本地缓存存储结构. 从上文 初识 Ka ...

  4. 谁再问elasticsearch集群Red怎么办？把这篇笔记给他

    前言 可能你经历过这些Red. ...等等 那ES的Red是神么意思? 这里说的red,是指es集群的状态,一共有三种,green.red.yellow.具体含义: 冷静分析 从上图可知,集群red是 ...

  5. docker-管理数据

    管理Docker中的数据 默认情况下,在容器内创建的所有文件都存储在可写容器层中.这意味着: 当该容器不再运行时,数据不会持久存在,如果另一个进程需要,则可能很难从容器中获取数据. 容器的可写层紧密耦 ...

  6. Win10下设置默认输入法与默认中文输入

    实现的效果: 把自己需要的一个或多个输入法软件添加到输入法列表中(一般就指定一个),避免了需要在打字时Ctrl + Shift等快捷键在多个输入法中不停切换的麻烦 首选语言默认为中文,毕竟作为一个中国 ...

  7. 11 个最佳的 Python 编译器和解释器

    原作:Archie Mistry 翻译:豌豆花下猫@Python猫 原文:https://morioh.com/p/765b19f066a4 Python 是一门对初学者友好的编程语言,是一种多用途的 ...

  8. C++ | C++ 基础知识 | 结构、联合与枚举

    1. 结构 1.0 结构 数组是相同类型元素的集合,相反,struct 是任意类型元素的集合. 代码例子: struct Address { const char* name; int number; ...

  9. [Windows] 系统清理与优化神器Advanced SystemCare 13 PRO非破解附正版激活码

    Advanced SystemCare是一款功能强大的系统清理优化软件,该软件提供的主要功能有:启动项优化.注册表整理和清理.隐私清扫.垃圾文件清理.快捷方式修复.恶意软件清除.网络加速.系统优化.安 ...

  10. 【Java基础总结】泛型

    泛型实现了参数化类型的概念,使代码可以应用于多种类型. 1. 泛型类 声明的泛型类型静态方法不能使用 class Tools<T>{ private T t; public void se ...