javascript实现2个select的PK

最新推荐文章于 2024-09-22 11:17:00 发布

made_in_chn

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量521

点赞数

分类专栏： JavaScript &amp; HTML 文章标签： javascript list firefox chrome ie function

本文链接：https://blog.csdn.net/made_in_chn/article/details/5548172

版权

JavaScript & HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如果要做一个PK的feature，左边选一个，右边选一个，但不能自己和自己PK，该怎么写？

select pk

解决方法很多：

1. 提示出错信息:

两个select都全员，如果选择一样的，就提示出错信息。但如果是i18n的feature，那出错信息就要翻译成各个语言。

2. disabled掉一个:

比如：

在js里边

select.options[i].disabled = true

因此，如果第一个select已经选了，第二个select在相应的option上将其disabled掉就行了。

这个在Firefox, Chrome, IE8上是好的，但很遗憾，当前用户量巨大的IE6不支持，这不白搞了嘛...

这位大哥给出了解决方案，这个还挺折腾的

http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/

3. 在第二个select中去掉已被第一个选中的元素:

就是每次onchange后，要重新生成第二个select

<html> <body> <select id="base_list" οnchange="sl()"> <option value="a" selected=1>C++</option> <option value="b">Python</option> <option value="c">Java</option> <option value="d">JavaScript</option> <option value="e">C#</option> <option value="f">C</option> <option value="g">PHP</option> </select> - V.S. - <select id="target_list" οnchange="sl()"> <option value="b">Python</option> <option value="c">Java</option> <option value="d">JavaScript</option> <option value="e">C#</option> <option value="f">C</option> <option value="g">PHP</option> </select> </body> <mce:script type="text/javascript"></mce:script> </html>

中间有些细节：

如何清除select.options

如何插入复制和插入option

option.selected不要乱设，否则会诡异地导致select无法被选择