通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> 动态添加的文本框和下拉框效果 /title>
<style type="text/css">
body { font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; }
ul { margin:0; padding:0; list-style:none; }
a { margin-left:5px; color:#07F; text-decoration:none; }
a:hover { text-decoration:underline; }
input { border:1px solid #ccc; margin:2px; }
table { border-collapse:collapse; border-spacing:0; }
td { margin:0; padding:10px; border:1px solid #ccc; }
</style>
<script type="text/javascript" src="/img/jquery.min.2.js"></script>
<script type="text/javascript">
$(function(){
$("#demo1").easyinsert();//最简单的应用
$("#demo2").easyinsert({
name: ["demo2", "demo2"],//可以同时添加两个（或更多），name值相同也必须分开设置，name数组的长度就是每组input的个数。type、value、maxlength、className四种属性，若同组组员的设置一样，可以只设置一次。
value: ["默认值2-1", "默认值2-2"],//可以给同组input分别设置默认值
maxlength: 15,//每组input的maxlength都一样，无需使用数组
className: ["demo2_class1", "demo2_class2"],//不用我解释了吧
toplimit: 5,//可以添加组数上限（默认是0，表示无上限），它是总管，so，name相当于小组组长
initValue: [//初始化的时候，各input的value就是归它管，必须是数组
["初始值2-1", "初始值2-2"]
]
});
$("#demo3").easyinsert({
name: "demo3",
toplimit: 2,
initValue: [
["初始值3-1"],//必须是数组，就算每组只有一个input
["初始值3-2"],
["初始值3-3"]//小三儿，别想蒙混过关，总管只允许添加两组
]
});
$("#demo4").easyinsert({
name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"],
type: ["text", "radio", "password", "checkbox", "file", "button"],
value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"]
});
$("#demo5").easyinsert({//type新增custom和select
name: ["demo5", "demo5", "demo5", "demo5"],
type: ["custom", "text", "custom", "select"],
value: ["<strong style=\"color:#ff7b0e;\">科目：</strong>", "", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论': '1', '技能': '2', '上机': '3' }],
initValue: [
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论a': '1', '技能a': '2', '上机a': '3' }],
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论b': '1', '技能b': '2', '上机b': '3' }]
]
});
});
/**
* EasyInsert 4.0
*
* @Depend jQuery 1.4+
**/
;(function($){
$.fn.extend({
"easyinsert": function(o){
o = $.extend({
//触发器
clicker: null,//根据class（或id）选择，默认.next()获取
//父标签
wrap: "li",
name: "i-text",
type: "text",
value: "",
maxlength: 20,
className: "i-text",
//新增上限值
toplimit: 0,//0表示不限制
//初始化值，二维数组
initValue: null//用于修改某资料时显示已有的数据
}, o || {});
var oo = {
remove: "<a href=\"#nogo\" class=\"remove\">移除</a>",
error1: "参数配置错误，数组的长度不一致，请检查。",
error2: "参数配置错误，每组初始化值都必须是数组，请检查。"
}
//容器
var $container = $(this);
var allowed = true;
//把属性拼成数组（这步不知道是否可以优化？）
var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className);
//arr ==> [name, type, value, maxlength, className]
var arr = new Array();
$.each(arrCfg, function(i, n){
if ( $.isArray(n) ) {
arr[i] = n;
} else {
arr[i] = new Array();
if ( i === 0 ) {
arr[0].push(n);
}else{
//补全各属性数组（根据name数组长度）
$.each(arr[0], function() {
arr[i].push(n);
});
}
}
//判断各属性数组的长度是否一致
if ( arr[i].length !== arr[0].length ) {
allowed = false;
$container.text(oo.error1);
}
});
if ( allowed ) {
//获取触发器
var $Clicker = !o.clicker ? $container.next() : $(o.clicker);
$Clicker.bind("click", function() {
//未添加前的组数
var len = $container.children(o.wrap).length;
//定义一个变量，判断是否已经达到上限
var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
if ( !isMax ) {//没有达到上限才允许添加
var $Item = $("<"+ o.wrap +">").appendTo( $container );
$.each(arr[0], function(i) {
switch ( arr[1][i] ) {
case "select"://下拉框
var option = "";
$.each(arr[2][i], function(i, n) {
option += "<option value='"+ n +"'>"+ i +"</option>";
});
$("<select>", {
name: arr[0][i],
className: arr[4][i]
}).append( option ).appendTo( $Item );
break;
case "custom"://自定义内容，支持html
$Item.append( arr[2][i] );
break;
default://默认是input
$("<input>", {//jQuery1.4新增方法
name: arr[0][i],
type: arr[1][i],
value: arr[2][i],
maxlength: arr[3][i],
className: arr[4][i]
}).appendTo( $Item );
}
});
$Item = $container.children(o.wrap);
//新组数
len = $Item.length;
if ( len > 1 ) {
$Item.last().append(oo.remove);
if ( len === 2 ) {//超过一组时，为第一组添加“移除”按钮
$Item.first().append(oo.remove);
}
}
$Item.find(".remove").click(function(){
//移除本组
$(this).parent().remove();
//统计剩下的组数
len = $container.children(o.wrap).length;
if ( len === 1 ) {//只剩一个的时候，把“移除”按钮干掉
$container.find(".remove").remove();
}
//取消“移除”按钮的默认动作
return false;
});
}
//取消触发器的默认动作
return false;
});
//初始化
if ( $.isArray(o.initValue) ) {//判断初始值是否是数组（必需的）
$.each(o.initValue, function(i, n) {
if ( !$.isArray(n) ) {
$container.empty().text(oo.error2);
return false;
}else{
if ( n.length !== arr[0].length ) {
$container.empty().text(oo.error1);
return false;
}
}
var arrValue = new Array();
//初始值替换默认值
$.each(n, function(j, m) {
arrValue[j] = arr[2][j]
arr[2][j] = m;
});
$Clicker.click();
//默认值替换初始值
$.each(arrValue, function(j, m) {
arr[2][j] = m;
});
//上面这种[移形换位法]不知道效率怎么样，我想不出别的更好的方法
});
}else{
$Clicker.click();
}
}
}
});
})(jQuery);
</script>
</head>
<body>
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>需要加载js文件，请刷新后看效果。<br />
<table width="90%" align="center">
<tr>
<td width="10%" align="right"><strong>Demo1</strong></td>
<td width="90%">
<ul id="demo1"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
<tr>
<td align="right"><strong>Demo2</strong></td>
<td>
<ul id="demo2"></ul>
<a href="#">+ 添加（最多5项）</a>
</td>
</tr>
<tr>
<td align="right"><strong>Demo3</strong></td>
<td>
<ul id="demo3"></ul>
<a href="#">+ 添加（最多2项）</a>
</td>
</tr>
<tr>
<td align="right"><strong>Demo4</strong></td>
<td>
<ul id="demo4"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
<tr>
<td align="right"><strong>Demo5</strong> <sup style="color:#F00;">NEW</sup></td>
<td>
<ul id="demo5"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
</table>
</body>
</html>
通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效的更多相关文章
- Jquery学习笔记：操作form表单元素之一（文本框和下拉框）
一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- robotframework文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- 背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
- 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
随机推荐
- jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...
- MVC5+EF6 入门
MVC5+EF6 入门完整教程九 前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发 ...
- Excel基于POI导入导出的Annotation化之路（一）
Excel在web项目里的使用变得越来越广泛,特别是和线下耦合度较高的业务,Excel导入导出变得非常频繁,尽管很多人写了诸多的工具方法,但是终究没有解决一个问题:有效的控制字段英文名称和实际表头名称 ...
- C# 调用Webservice并传递序列化对象
原文:C# 调用Webservice并传递序列化对象 C#动态调用WebService注意要点 1.动态调用的url后面注意一定要加上?WSDL 例如:string _url = "ht ...
- SQL Server中存储过程比直接运行SQL语句慢的原因
原文:SQL Server中存储过程比直接运行SQL语句慢的原因 在很多的资料中都描述说SQLSERVER的存储过程较普通的SQL语句有以下优点: 1. 存储过程只在创造时进行编译即可,以 ...
- Java之final、finalize、finally的区别
一.性质不同(1)final为关键字:(2)finalize()为方法:(3)finally为为区块标志,用于try语句中:二.作用(1)final为用于标识常量的关键字,final标识的关键字存储在 ...
- javascript and dom1
<script type="text/javascript"> //数组 var beatles=Array(4); var beatles=Array(); cons ...
- u-boot学习(两)：u-boot简要分析
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 看到不错的文章.不要加入收藏夹, ...
- 【剑指offer】员工年龄排序
典型的以空间换时间问题,思路非常重要! /* 员工年龄排序 员工可能有几万名,要求时间复杂度为O(n) 思路:员工的年龄必定在一个范围内,比方0-99,那么我们建立一个大小为100的辅助数组,然后遍历 ...
- 增加 Java 有几个好习惯表现
以下是一些参考网络资源中的摘要Java编程在一些地方尽可能做. 1. 尝试使用单个例如在合适的场合 使用单例可以减轻负荷的负担,缩短加载时间.提高装载效率,但并不是所有的地方都适合一个案例.简单的说, ...