`

无限下拉列表

阅读更多

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

即如果选择列表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>



分享到:
评论

相关推荐

    表单判断即弹出窗口,即无限下拉列表

    "表单判断即弹出窗口,即无限下拉列表"这个标题涉及到的是在用户填写表单时,通过实时判断来触发特定的弹出窗口,并且这些窗口可能包含了无限滚动的下拉列表。下面我们将深入探讨这些技术及其应用。 首先,表单判断...

    dropList v1.1 - JavaScript无限级联动下拉列表框

    《dropList v1.1:JavaScript无限级联动下拉列表框深度解析》 在Web开发中,用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验,还能有效节省页面空间。今天我们将深入探讨“dropList v...

    Javascript 生成无限下拉列表实现代码

    在JavaScript编程中,生成无限下拉列表是一种常见的需求,特别是在构建具有层级结构的数据展示时,如组织架构、地区选择或菜单导航。这个示例代码提供了一种方法来动态创建这样的无限下拉列表,通过递归地填充选项。...

    无限级、无刷新、联动下拉列表框

    在IT领域,尤其是在Web开发中,"无限级、无刷新、联动下拉列表框"是一种高效且用户体验良好的设计模式。这种技术通常应用于大型数据结构,如层级数据或分类系统,例如组织架构、地区层级或者产品分类等。在ASP.NET...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    简单无限级分类(表格、下拉列表)源码_aspx开发教程.rar

    - 对于下拉列表,通常需要一个主下拉列表选择父分类,然后动态加载子分类到另一个下拉列表。这涉及到JavaScript或AJAX交互,因为选择父分类后需要异步更新子分类列表。 - 使用`DropDownList`控件,并结合`...

    jquery自动滚动下拉列表框.rar

    《jQuery实现自动滚动下拉列表框技术详解》 在网页设计与开发中,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效,特别是针对...

    JS框架 V 1.6.4

    更新了 无限级下拉列表的 选择为空时 选择的值 为上一级下拉列表的值 [2009-06-13] V 1.6.1 更新了 无限级下拉列表中 如果调用是静态XML时 出现默认选项 [2.009-06-15] V 1.6.2 更新了 获得文件的名称及文件的...

    无限分级下拉列表(无刷新)

    无限分级下拉列表是一种常见的前端交互设计,常用于网站或应用程序中的导航菜单、选择器等,使得用户可以方便地在多个层次的选项间进行选择,而无需页面整体刷新。无刷新意味着通过Ajax技术实现,这样可以提高用户...

    ASP.NET-[其他类别]简单三层实现的无限级DropDownList.zip

    在这个特定的示例中,“ASP.NET-[其他类别]简单三层实现的无限级DropDownList.zip”文件中包含的是一个使用ASP.NET实现的无限级下拉列表(DropDownList)的实例。无限级下拉列表通常用于导航或层级数据的展示,例如...

    无限下拉加载

    "无限下拉加载"是一种常见的用户界面设计技术,主要用于网页或移动应用的列表视图,尤其是在数据量庞大的情况下。这种技术允许用户滚动到列表底部时,自动加载更多内容,而不是一次性显示所有数据,从而提高页面加载...

    动态加载下拉列表框

    在IT领域,动态加载下拉列表框是一种常见的交互设计,特别是在网页或应用程序中。它允许用户从一个可扩展的选项列表中进行选择,而这些选项可能不会一次性全部显示,而是根据用户的操作动态加载。这种技术提高了用户...

    简单无限级分类(表格、下拉列表)源码

    - "下拉列表":创建一个下拉列表供用户选择分类,这需要使用控件如ComboBox,并在其中填充所有分类,可能需要通过递归函数来生成所有级别的选项。 5. **VBA编程**: - Access中的宏和VBA脚本是实现这类功能的关键...

    AJAX_Servlet级联下拉列表

    在Web开发中,AJAX(Asynchronous JavaScript and XML)与Servlet技术常常被用来实现动态、交互式的用户界面,其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后,根据所选选项动态加载并...

    jQuery实现的无限级下拉菜单功能示例

    无限级下拉菜单,顾名思义,是一种可以无限扩展子菜单层级的下拉菜单。与传统的下拉菜单不同,无限级下拉菜单能够支持多个层级,甚至无限层级的子菜单,使得用户可以通过层层递进的方式访问到需要的选项,而不会因为...

    vue+webpack 无限下拉

    "无限下拉"是一种常见的网页交互设计,常见于新闻列表、社交媒体流等场景,用户可以不断地向下滚动页面以加载更多内容,而不是点击分页按钮。在Vue.js中,可以利用Vuex状态管理库来存储和管理数据,结合Axios或fetch...

    下拉列表XListView的简单分析

    在Android开发中,下拉列表通常用于展示大量可滚动的数据,而XListView是开发者们常用的一个自定义组件,它在ListView的基础上提供了上拉加载更多和下拉刷新的功能,极大地提升了用户体验。本文将对XListView进行...

    无限滚动下拉列表:Vue + Vuetify的无限滚动下拉列表

    无限滚动下拉Vue + Vuetify的无限滚动下拉列表项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。

Global site tag (gtag.js) - Google Analytics