添加,删除表单项

conkeyn

浏览: 1529165 次
性别:
来自: 厦门

最近访客更多访客>>

fuyun10036

yl4257891

ja_1991

chenzehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript XHTML HTML

<!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=utf-8" />
<title>添加,删除选择项</title>
<script type="text/javascript">
//用于计算有效的节点.
var validNodes =0;
function add_skill(parentDivId,divId,skillname){
	var parentDiv = document.getElementById(parentDivId);
	var bool=true;
	var i=1;
	while(bool){
		var div = document.getElementById(divId+i);
		if(div==null){
			var div = generateSkillItem(divId+i,i,skillname,parentDivId);
			//alert(div.innerText);
			parentDiv.appendChild(div);
			bool=false;
		}
		i++;
	}
}
function generateSkillItem(divId,index,skillname,parentDivId){
	var div = document.createElement("div");
	div.setAttribute("id",divId);
	//添加技能选择框
	var skillSelect = document.getElementById(skillname+'_1').cloneNode(true);
	skillSelect.id=skillname+"_"+index;
	div.appendChild(skillSelect);
	div.innerHTML+="&nbsp;";
	//添加技能等级选择框
	var skillLevelSelect = document.getElementById(skillname+'_level_1').cloneNode(true);
	skillSelect.id=skillname+"_level_"+index;
	div.appendChild(skillLevelSelect);	
	div.innerHTML+="&nbsp;<a href=\"javascript:removeSkillItem('"+parentDivId+"','"+divId+"')\">delete this item</a>";
	return div;
}

function removeSkillItem(parentDivId,divId){
	var parentDiv = document.getElementById(parentDivId);
	var div = document.getElementById(divId);
	parentDiv.removeChild(div);	
}
</script>
</head>

<body>
<div id="i_speak_div">
      <div id="i_speak_div_1">
          <select name="speak_language[]" id="speak_language_1">
              <option value="-1">Select a language</option>
              <option value="english">English</option>
              <option value="chinese">Chinese</option>
              <option value="japanese">Japanese</option>
          </select>
          <select name="speak_language_level[]" id="speak_language_level_1">
            <option value="-1">Your level</option>
            <option value="expert">Expert</option>
            <option value="good">Good</option>
            <option value="fair">Fair</option>
            <option value="poor">Poor</option>
          </select>
      </div>
  </div>
  <div id="i_speak_last"><a href="javascript:add_skill('i_speak_div','i_speak_div_','speak_language');">Add more...</a></div>
</body>
</html>

分享到：

makefile详解(1) | 详解公钥、私钥、数字证书的概念

2009-02-14 10:45
浏览 1161
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

添加,删除表单项

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

添加,删除表单项

评论

发表评论

相关推荐

Angularjs 1.x 中使用 layDate 日期控件

简易向左移动的滚动效果 jquery simple marquee

angualrjs添加动态指令（动态编译指令）

CKeditor的取值和赋值

Spring boot 环境下配置CKEditor添加google map

javascript中借用别的类的方法

Javascript的类与子类创建

jQuery 对 select 操作

JSON2的使用方法心得

json对象的应用

JQuery对html控件操作总结

将json元素添加到表单select中

js加密解密

设为首页JS,加入收藏夹js,加入收藏夹代码,设为首页代码,火狐和ie兼容

精通 JS正则表达式

jQuery.Autocomplete 中文支持

强烈推荐：240多个jQuery插件

jQuery中this与$(this)的区别

JS获得鼠标位置（兼容多浏览器ie,firefox）

javascript 计算文字长度

最近访客更多访客>>