选择时禁用选择选项值答案

【问题标题】：disable select option value when selected选择时禁用选择选项值
【发布时间】：2014-04-09 07:08:10
【问题描述】：

我正在使用此代码。但是我遇到了一个问题，当我在第一个选择框中选择“一”，然后在第二个选择框中选择“二”，当我再次将第二个值选择为“三”时，但值“二”仍然被禁用：

HTML 代码

// one
<select>
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>
//two
<select>
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

这是 JavaScript 代码：

$(document).ready(function(e) {

    var $selects = $('select#players');
    available = {};

    $('option', $selects.eq(0)).each(function (i) {
        var val = $.trim($(this).text());
        available[val] = false;
    });

    $selects.change(function () {
        var $this = $(this);
        var selectedVal = $.trim($this.find('option:selected').text());

        available[selectedVal] = true;

        $selects.not(this).each(function () {
            $('option', this).each(function () {
                var optText = $.trim($(this).text()),
                    optCheck = available[optText];
                if(optCheck) {
                    $(this).prop('disabled', true);
                }
                else {
                     $(this).prop('disabled', false);
                }
            });
        });
    }).change(); // Trigger once to add options at load of first

});

【问题讨论】：

请注意，如果您在页面上有复杂的依赖关系，请考虑使用类似 knockout.js 而不是 jQuery 来处理它们。

标签： javascript jquery html html-select

【解决方案1】：

假设您希望在选择后禁用其他选择框中的值，这里有一个示例。

<select>
    <option value="" selected="selected">Select</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>
<select>
    <option value="" selected="selected">Select</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

$(document).ready(function (e) {
    var $selects = $('select');
    $selects.change(function () {
        var value = $(this).val();
        if (value == "") {
            return false;
        }
        $selects.not(this).each(function () {
            $('option', this).each(function () {
                var sel = $(this).val();
                if (sel == value) {
                    $(this).prop('disabled', true);
                } else {
                    $(this).prop('disabled', false);
                }
            });
        });
    }).change(); // Trigger once to add options at load of first

});

还有一个工作的fiddle

【讨论】：

【解决方案2】：

有点难以理解你在这里问什么。我假设您想知道当在任一选项中选择一个选项时如何禁用两个选择框中的选项。我在想的场景是，您在两个选择框中显示球员列表，当其中一个被第一支球队选择时，另一支球队不能选择同一个球员？

这是一个有效的小提琴：http://jsfiddle.net/theoutlander/MT5th/。我不喜欢 jquery，所以我在 vanilla JS 中做了这个。

// one
<select id="s1" onchange="handleSelection(this, s2)">
    <option>Select</option>
    <option value="1">one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

//two
<select id="s2" onchange="handleSelection(this, s1)">
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

function handleSelection(source, dest) {
    source.options[source.selectedIndex].disabled=true;
    dest.options[source.selectedIndex].disabled=true;
}

【讨论】：

用简单的语言我想防止用户选择播放器两次。

【解决方案3】：

你的 javascript 的第一行...

var $selects = $('select#players');

...实际上并没有选择任何东西。您需要将 id 'players' 添加到您的 select 元素之一，或更改您的选择器。

另外，我不知道你实际上想做什么。您能否更清楚地说明您的目标是什么？

【讨论】：

用简单的语言我想防止用户选择播放器两次。