选择时禁用选择选项值 [英] disable select option value when selected

问题描述

我正在使用这段代码。但是我面临的一个问题是，当我在第一个选择框中选择one，然后在第二个中选择two，并且当我再次选择第二个值为three但值two时仍然被禁用：

I am using this code. But I'm facing a problem that when I select "one" in 1st select box and then in 2nd I select "two" and when I select again 2nd value to "three" but the value "two" remain disabled:

HTML代码

HTML code

// 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代码：

This is JavaScript code:

$(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

});

推荐答案

假设您要禁用其他select-

Assuming you want to disable values in the other select-boxes once chosen, here is a sample.

<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

});

另外一个工作小提琴

这篇关于选择时禁用选择选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！