动态添加

<%@ 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. 【题解】BZOJ4883: [Lydsy1705月赛]棋盘上的守卫(最小生成基环森林)

    [题解]BZOJ4883: [Lydsy1705月赛]棋盘上的守卫(最小生成基环森林) 神题 我的想法是,每行每列都要有匹配且一个点只能匹配一个,于是就把格点和每行每列建点出来做一个最小生成树,但是不 ...

  2. 【题解】Killer Names($O(n\log n)$做法)

    [题解]Killer Names(\(O(n\log n)\)做法) HDU - 6143 感觉好久没做过这种直来直去的组合题,过来水一篇题解.还以为要写一个\(MTT\)或者三模数\(NTT\),想 ...

  3. 1046 划拳 (15 分)C语言

    划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...

  4. 【一起学源码-微服务】Ribbon 源码四：进一步探究Ribbon的IRule和IPing

    前言 前情回顾 上一讲深入的讲解了Ribbon的初始化过程及Ribbon与Eureka的整合代码,与Eureka整合的类就是DiscoveryEnableNIWSServerList,同时在Dynam ...

  5. Linux学习_菜鸟教程_4

    Linux远程登录 已经了解了登录流程,学会了用SecureCRT进行操作 Linux文件基本属性 Linux为保护系统安全,对不同的用户,开放不同的文件访问权限. 在linux中,我们可以使用ll或 ...

  6. 【JavaScript学习笔记】函数、数组、日期

    一.函数 一个函数应该只返回一种类型的值. 函数中有一个默认的数组变量arguments,存储着传入函数的所有参数. 为了使用函数参数方便,建议给参数起个名字. function fun1(obj, ...

  7. Animator的小记

    前阵子在做动画相关的内容,整理一下Animator. 1.动画切换 1.1状态之间的切换,在状态间连线(Make Transition),并且设置触发条件,代码里调用SetTrigger.SetBoo ...

  8. 算法学习导图+经典排序算法PHP实现

    周末抽时间整理下算法,完整导图可点击下面链接获取. 点我看完整算法导图 八种排序算法的php实现 代码如下 拷贝后可直接运行 先上个运行后的图 代码:(有的自己些的 有的根据网友整理) <?ph ...

  9. 七彩线段 - 装压dp (牛客网)

    题目描述听说彩虹有七种颜色?一维坐标轴上n条线段,每条线段左端点l,右端点r,颜色为c,从中选m种颜色的互不接触的线段,每种颜色可选多条,所选线段的总长度最长为多少?输入描述: 第一行2个整数 n, ...

  10. java 大数的学习

    import java.math.*; import java.util.*; public class study { public static void main(String[] args) ...