无限下拉列表

qincidong

浏览: 237704 次
性别:
来自: 北京

最近访客更多访客>>

abcd2010

qq1002517

samwong

OMGlalala

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js+Css+Html

js 月份无限下拉

无限增加下拉列表，每个列表的值不重复。

即如果选择列表1中的2，那么第2个列表就不会有这个值了。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
	
	<div id='div1'>

	</div>
	<input type='button' value='Add' onclick='addDivSelect();'>

	<script language="JavaScript">
	<!--
		var div1 = document.getElementById('div1');
		var currentSelectIndex = 0;
		var select_option_data = new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31);
		// 保存当前所有的下拉列表的索引
		var select_array_all = new Array();
		// 保存需要改变的下拉列表的索引
		var chg_select_array = new Array();
		// 保存所有下拉列表选中的值，以便在添加下拉列表时使用。
		var selected_opts = new Array;

		getSelectedOpts = function() {
			var idx = 0;
			for (var i=0;i< select_array_all.length; i++)
			{
				var sel = document.getElementById('select_' + select_array_all[i]);
				if (sel)
				{
					selected_opts[idx] = sel.options[sel.selectedIndex].value;
					idx++;
				}
			}
		}

		checkExist = function(sel_opt_val) {
			for (var i=0;i< selected_opts.length;i++ )
			{
				if (selected_opts[i] == sel_opt_val)
				{
					return true;
				}
			}

			return false;
		}

		addDivSelect = function() {
			currentSelectIndex++;
			div1.innerHTML += "<span id='span_" + currentSelectIndex + "'><select id='select_" + currentSelectIndex + "' onchange='chgSelect("+currentSelectIndex+")'></select><input type='button' value='-' onclick='deleteSelect("+currentSelectIndex+")'></span>";

			var curSelect = document.getElementById('select_' + currentSelectIndex);

			getSelectedOpts();

			for (var i=0;i< select_option_data.length;i++ )
			{
				var bol = checkExist(select_option_data[i]);
				if (!bol)
				{
					var opt = new Option(select_option_data[i],select_option_data[i]);
					curSelect.options.add(opt);
				}
			}

			select_array_all[currentSelectIndex-1] = currentSelectIndex;
			
		}

		deleteSelect = function(currentSelectIndex) {
			var del_span = document.getElementById('span_' + currentSelectIndex);
			div1.removeChild(del_span);
			var arr = new Array;
			var arr_index = 0;

			for (var i=0;i< select_array_all.length;i++ )
			{
				if (select_array_all[i] != currentSelectIndex)
				{
					arr[arr_index] = select_array_all[i];
					arr_index++;
				}
			}

			select_array_all = arr;
		}

		chgSelect = function(currentSelectIndex) {
			// 当前下拉列表
			var cur_select = document.getElementById('select_' + currentSelectIndex);
			// 改变其他的下拉列表
			for (var i=0;i<select_array_all.length ;i++ )
			{
				if (select_array_all[i] != currentSelectIndex)
				{
					// 去掉当前下拉列表选中的值
					// 得到要去掉option的下拉列表对象
					var del_sel = document.getElementById('select_' + select_array_all[i]);
					if (del_sel)
					{
						for (var j=0;j<del_sel.options.length ;j++ )
						{
							if (del_sel.options[j].value == cur_select.options[cur_select.selectedIndex].value)
							{
								del_sel.options[j] = null;
							}
						}
					}
				}
			}
		}
	//-->
	</script>
</body>
</html>

分享到：

Eclipse常用的几个功能设置 | 使用jquery自动完成

2011-07-28 15:30
浏览 489
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无限下拉列表

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无限下拉列表

评论

发表评论

相关推荐

一款JS日历控件

offsetParent和parentElement的区别

可编辑下拉列表

aptana studio3

css中使用一张图片显示多个背景

jQuery提示插件——Poshy

免费在线天气预报代码

iframe自适应高度

HTML DOM Event 对象

HTML消息提示层

可编辑的下拉列表+模糊搜索（模拟）

js实现拖拽分页【转】

JavaScript图片放大技术

JS软键盘密码输入器

JS时间选择器

使用dTree构建树形菜单

使用json+jquery模拟股票涨停

[转载]JS获取当前对象大小以及屏幕分辨率等

js导出Excel

将页面中指定表格的数据导入到Excel中

最近访客更多访客>>