html 多个下拉框有相同的数据，选中一个数据其他下拉框删除这个数据，用js怎么实现？哪位大侠帮个忙呀！！

定个小目标 2013-03-04 05:32:11

<BODY>
<div align="center">两个下拉框你只能选择不同的值<br>
<select id="Color_1" onChange="ddlChange1(this.value);">
<option selected value=''>你的WEB编程语言</option>
<option value='ASP'>ASP</option>
<option value='PHP'>PHP</option>
<option value='JSP'>JSP</option>
<option value='CGI'>CGI</option>
</select>
<select id="Color_2" onChange="ddlChange2(this.value);">
<option selected value=''>你的WEB编程语言</option>
<option value='ASP'>ASP</option>
<option value='PHP'>PHP</option>
<option value='JSP'>JSP</option>
<option value='CGI'>CGI</option>
</select>
<select id="Color_3" onChange="ddlChange3(this.value);">
<option selected value=''>你的WEB编程语言</option>
<option value='ASP'>ASP</option>
<option value='PHP'>PHP</option>
<option value='JSP'>JSP</option>
<option value='CGI'>CGI</option>
</select>
</div>
</BODY>

...全文

450 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

jswatcher 2013-03-04

打赏
举报

引用 1 楼 bbjbepzz 的回复:

…… function removeOption(index , v){ …… obj.removeChild(options[j]); …… } ……

1 楼的方案的问题是，当再次在第一个下拉框选择不同的值后，第二个下拉框的选择就丢失了一个（在第一轮选择时被removeChild给消除了！）。所以这里不能消除，只能隐藏。具体如下，


function ddlChange1(v){
	displayOptions(2, [v]);
	displayOptions(3, [v]);
	ddlChange1.hiddenOption = v;  // keep the hidden value for ddlChange2
}

function ddlChange2(v){
	displayOptions(3, [ddlChange1.hiddenOption, v]);
}

function ddlChange3(v){
}

function displayOptions(selectIndex, hiddenOptions){
	// Get select element
	var el = document.getElementById('Color_' + selectIndex);
	el.value = '';
	
	var i;
	
	// Prepare hidden option set
	var hSet = {};
	for (i=0; i<hiddenOptions.length; i++) {
		hSet[hiddenOptions[i]] = true;
	}
	
	// hide the hidden options and show the others
	var ops = el.options;
	for(i=0 ; i < ops.length ; ++i) {
		if(hSet[ops[i].value]){				
			ops[i].style.display = "none"; // hide
		} else {
			ops[i].style.display = "";     // show
		}
	}
}

这个解决方案，可以，使用者可以从左到右，退回，反复选择，直到满意为止。例如：第一轮：选择一，选择二，选择三第二轮：回过头去，选择二，选择三第三轮：回过头去从来，选择一，选择二，选择三

bbjbepzz 2013-03-04

打赏
举报


function ddlChange1(v){
	/*xxxx*/
	removeOption(2,v);
}
function ddlChange2(v){
	/*xxxx*/
	removeOption(3,v);	
}
function ddlChange3(v){
	/*xxxx*/
}
function removeOption(index , v){
	var obj , options;
	for(var i = index ; i <= 3 ; ++i){
		obj = document.getElementById('Color_' + i);		
		options = obj.options;
		for(var j = 0 ; j < options.length ; ++j){
			if(options[j].value == v){				
				obj.removeChild(options[j]);
			}
		}
	}
}

1.javascript 1. &lt;!-- 行内脚本需要注意引号的问题 Java:字符串"",字符'' JavaScript:"",''都表示字符注意:一行当中双引号，和单引号不能同时使用 --...

你可能会问，为什么用Layui实现页面效果？简单来说就是：简单、好用、上手快，作为JAVA后端开发人员,Layui无疑是非常友好的，拿来即用。页面效果图：练习用的数据库表格：emp和dept 员工和部门 ![在这里插入图片...

by zhangxinxu from http://www.zhangxinxu.com 本文地址：... 更新于2014年12月18日 0:35 本插件已经迁移至Github上更新与维护：https://github.com/zhangxinxu/html5Validate 更新于2016-02-25

数据源的Select事件只会执行一次，并且执行之后会RowDataBound新数据，所以，如果设置一个变量来确保只有数据源的Select事件之后才RowDataBound就ok了把重写的PreRender换为在GridView的构造函数中增加GridView的...

[转]ASP.NET四种页面导航方式之比较与选择在ASP.NET应用中，Web表单之间的导航有多种方式：用超级链接，用Response.Redirect，用Server.Transfer，或者用Server.Execute。本文将分析这四种导航方式的异同及其优缺点...