无限下拉列表

最新推荐文章于 2021-04-16 17:07:10 发布

luckystar2008

最新推荐文章于 2021-04-16 17:07:10 发布

阅读量632

点赞数

文章标签： function generator div button javascript html

本文链接：https://blog.csdn.net/qincidong/article/details/6641200

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

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

即如果选择列表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' οnclick='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 + "' οnchange='chgSelect("+currentSelectIndex+")'></select><input type='button' value='-' οnclick='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>

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限下拉列表

无限增加下拉列表，每个列表的值不重复。即如果选择列表1中的2，那么第2个列表就不会有这个值了。代码： New Document <!-- var div1 = document.getElementById('div1');
复制链接

扫一扫