9
回答
多个select,如何选择一个则清空其它已选定的
注册华为云得mate10,2.9折抢先购!>>>   

如图,用jquery如何处理呢?

举报
zjf_sdnu
发帖于6年前 9回/2K+阅
共有9个答案 最后回答: 6年前

jQuery 1.60+

<script src="jquery.js"></script>
<script>
	$(document).ready(function() {
		var sel_elm = $('select[name^="ctl"]');

		sel_elm.change(function() {
			var that = this;
			sel_elm.each(function() {
				if (this != that) {
					$(this).prop('selectedIndex', -1);
				}
			});
		});
	});

</script>

 

jQuery v1.60 pre

<script src="jquery.js"></script>
<script>
	$(document).ready(function() {
		var sel_elm = $('select[name^="ctl"]');

		sel_elm.change(function() {
			var that = this;
			sel_elm.each(function() {
				if (this != that) {
					$(this).attr('selectedIndex', -1);
				}
			});
		});
	});

</script>

 

 

 

 

 

 

$("select").attr("onchange",function(){

var val=$(this).val();

$("select option").each(function(){

$(this).attr("SELECTED",$(this).val()==val);

});

})

--- 共有 13 条评论 ---
sxgkwei@mark35 : 嘿嘿,反正用起来,效果上没差别,当然我是喜欢比较通用的方式。change,bind之类的还有一大串,多了记不住,就记一个attr,要搞啥都用这个,取用它,设置也用它,也不管它要设置啥东西了。 6年前 回复
mark35@sxgkwei : 我一般用两种方式绑定 elm.change(fn);或者elm.bind('change', fn); 你这种方式没用过。我想既然是用jQuery那么就尽量使用它的方式,你这种方式感觉有点hack的方式~ 6年前 回复
sxgkwei@mark35 : 2个都可以,这1年来做东西,一直用的1.3jquery,bind是绑定事件,attr是添加属性。对于这个来说,没区别。难道你用的版本,这2个有区别? 6年前 回复
mark35@sxgkwei : 第一行 $("select").attr("onchange",function(){}的attr应该是bind吧? 6年前 回复
sxgkwei@mark35 : 哦哦。没注意看,以为你是LZ了。如果是LZ,说什么效率问题,那我肯定就不耐烦了撒,既然LZ你要用,而且也看出效率问题了,那就自己改改呗,还有啥好说的嘛,难道让我还兢兢业业的给你完美解决方案,所以我说我又不是雇员。不过你不是LZ,抱歉,纯技术上,是有效率问题,我承认。 6年前 回复

有人能帮一下吗?就是如何移除别的select的焦点。

类似这样:

<select size="22" name="ctl02">
		<option value="2671">2201(顶楼)</option>
		<option value="2667">2101(中间)</option>
		<option value="2657">2001(中间)</option>
		<option value="2647">1901(中间)</option>
		<option value="2637">1801(中间)</option>
		<option value="2627">1701(中间)</option>
		<option value="2617">1601(中间)</option>
		<option value="2607">1501(中间)</option>
		<option value="2597">1401(中间)</option>
		<option value="2587">1301(中间)</option>
		<option value="2577">1201(中间)</option>
		<option value="2567">1101(中间)</option>
		<option value="2557">1001(中间)</option>
		<option value="2547">901(中间)</option>
		<option value="2537">801(中间)</option>
		<option value="2527">701(中间)</option>
		<option value="2517">601(中间)</option>
		<option value="2507">501(中间)</option>
		<option value="2497">401(中间)</option>
		<option value="2487">301(中间)</option>
 
	</select><select size="22" name="ctl03">
		<option value="2672">2202(顶楼)</option>
		<option value="2668">2102(中间)</option>
		<option value="2658">2002(中间)</option>
		<option value="2648">1902(中间)</option>
		<option value="2638">1802(中间)</option>
		<option value="2628">1702(中间)</option>
		<option value="2618">1602(中间)</option>
		<option value="2608">1502(中间)</option>
		<option value="2598">1402(中间)</option>
		<option value="2588">1302(中间)</option>
		<option value="2578">1202(中间)</option>
		<option value="2568">1102(中间)</option>
		<option value="2558">1002(中间)</option>
		<option value="2548">902(中间)</option>
		<option value="2538">802(中间)</option>
		<option value="2528">702(中间)</option>
		<option value="2518">602(中间)</option>
		<option value="2508">502(中间)</option>
		<option value="2498">402(中间)</option>
		<option value="2488">302(中间)</option>
 
	</select><select size="22" name="ctl04">
		<option value="2673">2203(顶楼)</option>
		<option value="2669">2103(中间)</option>
		<option value="2659">2003(中间)</option>
		<option value="2649">1903(中间)</option>
		<option value="2639">1803(中间)</option>
		<option value="2629">1703(中间)</option>
		<option value="2619">1603(中间)</option>
		<option value="2609">1503(中间)</option>
		<option value="2599">1403(中间)</option>
		<option value="2589">1303(中间)</option>
		<option value="2579">1203(中间)</option>
		<option value="2569">1103(中间)</option>
		<option value="2559">1003(中间)</option>
		<option value="2549">903(中间)</option>
		<option value="2539">803(中间)</option>
		<option value="2529">703(中间)</option>
		<option value="2519">603(中间)</option>
		<option value="2509">503(中间)</option>
		<option value="2499">403(中间)</option>
		<option value="2489">303(中间)</option></select>

改进版本,提高效率,且不区分jQuery版本

<script src="jquery.js"></script>
<script>
	$(document).ready(function() {
		var sel_elm = $('select[name^="ctl"]'),
		    sel_last;

		sel_elm.change(function() {
			if (sel_last != this) {
				sel_last = this;
				sel_elm.each(function() {
				    (sel_last != this) && (this.selectedIndex = -1);
				});
			}
		});
	});
</script>

 


再一个,

jQuery v1.60+


<script src="jquery.js"></script>
<script>
	$(document).ready(function() {
		var sel_elm = $('select[name^="ctl"]'),
			sel_last;

		sel_elm.change(function() {
			var that = $(this);
			if (sel_last != that) {
				sel_last = that;
				sel_elm.not(sel_last).prop('selectedIndex', -1);
			}
		});
	});
</script>

 

 

 

很感谢mark35的热心。在你给的代码基础上,我做了如下修改:

1、去掉[name^="ctl"],那个name是.net的ListBox自动生成的,还是不要依赖的好

2、与其在each循环里每次都做判断,不如先存储原来的索引,这样性能和代码可读性都有提高。

$('select').change(function () {
	var index = this.selectedIndex;
	$('select').each(function () {
		this.selectedIndex = -1;
	});
	this.selectedIndex = index;
});

selectedIndex=-1,又学到了一点,感谢mark35的无私奉献!

--- 共有 4 条评论 ---
mark354、使用JS操作DOM的一个重要原则是:对于重复使用的对象尽量缓存。所以使用 var sel_elm = $('select'); 先把所有要操作的对象取出来赋值到一个变量,以后就全部对这个变量进行操作免除每次都要去搜索DOM树获得对象,可以带来很大的性能提升(当然总体提升并不明显,是百分率很高)。 6年前 回复
mark353、并且每次事件都要重置所有【select】的selectedIndex值,这个是相当不合理的。应该判断触发的对象是否是上次相同的【select】对象,如果不是才需要去修改其他的对象。 6年前 回复
mark352、请看楼上“改进版本,提高效率,且不区分jQuery版本”,这个性能更好。你这个修改版需要重复对$('select')进行获取而不是先取一次保存到一个变量以后直接对变量处理,这样会导致性能开销,【select】越多越浪费。 6年前 回复
mark351、[name^="ctl"]这个是根据你代码中的信息为了避免与其他【select】冲突才加上的,你可以自己修正,比如根据class来判断。当然如果整个页面的所有【select】都是需要操作的那直接取'select'也行 6年前 回复

受教了!不过对于第3点不敢苟同,能实现同样的功能,代码当然越简单越好。

想测试一下实际花费时间,用js Date对象的getTime()方法,结果11个select都没用1ms。

--- 共有 6 条评论 ---
mark35奇怪,我明明把“多于”改成“多余”了的,怎么还是别字呢…… 6年前 回复
mark35所以我上面提到性能提升,假如所有操作从10ms提升到1ms,比率上提升了10倍,而实际时间你并不会察觉。但如果认为不明显就认为善小而不为之,那么当遇到恶了呢? 6年前 回复
zjf_sdnu@mark35 : 有道理! 6年前 回复
mark35你要明白,“代码越简单越好”不是简单的你所认为“你书写的代码越少越好”而是多于操作越少越好。你每次都去重置所有【select】对象,虽然在你这儿没问题,但假如在其他场合这个【select】对象绑定了其他事件了呢?你确认你的额外操作不会触发其他对象上不应该触发的事件么?当然改变select.selectedIndex值似乎并不会触发对象上的onchange事件。但既然是做技术的就应该有所追求。 6年前 回复
mark35代码简单并不意味着运行开销小。每个select.onchange事件都重复去获取DOM对象(并且不是用id去获取唯一对象,而是多个对象)这是极为不妥的。 6年前 回复
顶部