多个select，如何选择一个则清空其它已选定的

zjf_sdnu 发布于 2011/10/13 14:40

阅读 2K+

答案 9

jQuery

同样是搞Java，年薪15W和50W到底差在哪里？

如图，用jquery如何处理呢？

加载中

mark35

2011/10/14 11:01

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>

评论 (0) 引用此答案举报

sxgkwei

2011/10/13 14:58

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

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

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

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

});

})

评论 (13) 引用此答案举报

sxgkwei

2011/10/14 11:38

@mark35 : 嘿嘿，反正用起来，效果上没差别，当然我是喜欢比较通用的方式。change,bind之类的还有一大串，多了记不住，就记一个attr，要搞啥都用这个，取用它，设置也用它，也不管它要设置啥东西了。

回复举报

mark35

2011/10/14 11:32

@sxgkwei : 我一般用两种方式绑定 elm.change(fn);或者elm.bind('change', fn); 你这种方式没用过。我想既然是用jQuery那么就尽量使用它的方式，你这种方式感觉有点hack的方式～

回复举报

sxgkwei

2011/10/14 11:29

@mark35 : 2个都可以，这1年来做东西，一直用的1.3jquery，bind是绑定事件，attr是添加属性。对于这个来说，没区别。难道你用的版本，这2个有区别？

回复举报

mark35

2011/10/14 11:24

@sxgkwei : 第一行 $("select").attr("onchange",function(){}的attr应该是bind吧？

回复举报

sxgkwei

2011/10/14 11:23

@mark35 : 哦哦。没注意看，以为你是LZ了。如果是LZ，说什么效率问题，那我肯定就不耐烦了撒，既然LZ你要用，而且也看出效率问题了，那就自己改改呗，还有啥好说的嘛，难道让我还兢兢业业的给你完美解决方案，所以我说我又不是雇员。不过你不是LZ，抱歉，纯技术上，是有效率问题，我承认。

回复举报

zjf_sdnu

2011/10/13 16:06

应该用blur()移除焦点

http://w3school.com.cn/tiy/t.asp?f=hdom_select_focus_blur

评论 (0) 引用此答案举报

zjf_sdnu

2011/10/14 09:12

有人能帮一下吗？就是如何移除别的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>

评论 (0) 引用此答案举报

mark35

2011/10/14 11:22

改进版本，提高效率，且不区分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>

评论 (0) 引用此答案举报

mark35

2011/10/14 11:52

再一个，

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>

评论 (0) 引用此答案举报

张金富

2011/10/14 13:53

mark35给的好详细呀！我对你的崇拜如长江之水滔滔不绝，又如黄河泛滥一发不可收拾

评论 (0) 引用此答案举报

zjf_sdnu

2011/10/14 14:10

很感谢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) 引用此答案举报

mark35

2011/10/14 14:42

4、使用JS操作DOM的一个重要原则是：对于重复使用的对象尽量缓存。所以使用 var sel_elm = $('select'); 先把所有要操作的对象取出来赋值到一个变量，以后就全部对这个变量进行操作免除每次都要去搜索DOM树获得对象，可以带来很大的性能提升（当然总体提升并不明显，是百分率很高）。

回复举报

mark35

2011/10/14 14:39

3、并且每次事件都要重置所有【select】的selectedIndex值，这个是相当不合理的。应该判断触发的对象是否是上次相同的【select】对象，如果不是才需要去修改其他的对象。

回复举报

mark35

2011/10/14 14:36

2、请看楼上“改进版本，提高效率，且不区分jQuery版本”，这个性能更好。你这个修改版需要重复对$('select')进行获取而不是先取一次保存到一个变量以后直接对变量处理，这样会导致性能开销，【select】越多越浪费。

回复举报

mark35

2011/10/14 14:34

1、[name^="ctl"]这个是根据你代码中的信息为了避免与其他【select】冲突才加上的，你可以自己修正，比如根据class来判断。当然如果整个页面的所有【select】都是需要操作的那直接取'select'也行

回复举报

zjf_sdnu

2011/10/14 15:45

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

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

评论 (6) 引用此答案举报

mark35

2011/10/14 16:07

奇怪，我明明把“多于”改成“多余”了的，怎么还是别字呢……

回复举报

mark35

2011/10/14 16:06

所以我上面提到性能提升，假如所有操作从10ms提升到1ms，比率上提升了10倍，而实际时间你并不会察觉。但如果认为不明显就认为善小而不为之，那么当遇到恶了呢？

回复举报

zjf_sdnu

2011/10/14 16:05

@mark35 : 有道理！

回复举报

mark35

2011/10/14 16:03

你要明白，“代码越简单越好”不是简单的你所认为“你书写的代码越少越好”而是多于操作越少越好。你每次都去重置所有【select】对象，虽然在你这儿没问题，但假如在其他场合这个【select】对象绑定了其他事件了呢？你确认你的额外操作不会触发其他对象上不应该触发的事件么？当然改变select.selectedIndex值似乎并不会触发对象上的onchange事件。但既然是做技术的就应该有所追求。

回复举报

mark35

2011/10/14 15:58

代码简单并不意味着运行开销小。每个select.onchange事件都重复去获取DOM对象（并且不是用id去获取唯一对象，而是多个对象）这是极为不妥的。

回复举报