首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >禁用HTML列表框中的一个选项

禁用HTML列表框中的一个选项
EN

Stack Overflow用户
提问于 2011-12-19 18:30:43
回答 2查看 1.8K关注 0票数 0

我有3个显示相同选项的列表框。我想禁用在列表框中选中的另外两个列表框中的选项。我想让我的用户先去掉任何列表框。任何帮助都是非常感谢的。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-12-19 19:02:29

如果您有以下HTML:

代码语言:javascript
运行
复制
<select id="select1">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<select id="select2">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<select id="select3">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

你可以做到这一点(在jquery的帮助下):

代码语言:javascript
运行
复制
var previousValues = []
    $selects = $('#select1, #select2, #select3');

$selects
    .mousedown(function(e) {
        // save the previous value for re-enabling it when you change
        var val = $(this).val();
        if (val) {
            previousValues[this.id] = val;
        }
    })
    .change(function(e) {
        // get the other select elements
        var $theOtherSelects = $selects.not('#' + this.id),
            prevVal = previousValues[this.id],
            val = $(this).val();

        // re-enable the previously disabled option
        if (prevVal) {
            $theOtherSelects
                .find('option[value=' + prevVal + ']')
                .prop('disabled', false);
        }

        // if a value is selected, disble in the other selects            
        if (val) {
            $theOtherSelects
                .find('option[value=' + val + ']')
                .prop('disabled', true);
        }
    })
    .mousedown()
    .change();

这是供您使用的jsfiddle

注释:我之所以使用jQuery,是因为它更简单,可以跨浏览器工作,而且您没有明确表示不想使用它。

票数 2
EN

Stack Overflow用户

发布于 2011-12-19 18:35:51

您可以为每个选项设置一些唯一的属性(该值可能足够了,否则class是一个很好的选择),并在其中一个选择中选中一个选项时,使用jQuery从其他两个选项中选择和删除该选项。

编辑:这里有一个例子,它按照你想要的方向做了一些事情。你得自己修改一下。不过,Didier的答案可能更接近你想要的。

http://jsfiddle.net/baByZ/39/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8559999

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档