Javascript 禁用基于三个字符串的选择选项

我有五个选择选项下拉列表，如下所示：

<select id="select1">
    <option value="" selected="selected"></option>
    <option value="ALB - Joe Bloggs">ALB - Joe Bloggs</option>
    <option value="ALG - Fred Perry">ALB - Joe Bloggs</option>
    etc
</select>

阿尔布-乔·布洛格斯
阿尔布-乔·布洛格斯
等

使用jQuery

.change（）

事件，我想做的是获取当前三个字符的国籍，即ALB，并在其他四个下拉列表中禁用所有后续选择选项

这个想法是允许选择5名球员，这样你就不能有一名具有相同国籍的球员。不幸的是，我无法控制呈现的html

更新：

---

我一直在尝试以下操作：

在更改处理程序中，循环每个

选择

，然后在每个其他

选择中找到匹配的
选项，并禁用它：

// inside of your change handler
$('select').each(function() {

    var currentValue = this.value.split(' ').shift();

    $('select').not(this).find('option').filter(function() {
      return this.value.split(' ').shift() === currentValue;
    }).prop('disabled', true);

});

在更改处理程序内部，循环遍历每个
选择
，然后在每个其他
选择
中找到匹配的
选项
，并禁用它：

// inside of your change handler
$('select').each(function() {

    var currentValue = this.value.split(' ').shift();

    $('select').not(this).find('option').filter(function() {
      return this.value.split(' ').shift() === currentValue;
    }).prop('disabled', true);

});

尝试使用过滤器：

$('select').change(function () {
    var val = this.value.substr(0, 3);
    $('select').not(this).find('option').filter(function () {
        return this.textContent.indexOf(val) !== -1
    }).prop('disabled', true);
});

尝试使用过滤器：

$('select').change(function () {
    var val = this.value.substr(0, 3);
    $('select').not(this).find('option').filter(function () {
        return this.textContent.indexOf(val) !== -1
    }).prop('disabled', true);
});

^
：选择具有指定属性且值以给定字符串开头的元素

简短解决方案：您也可以像下面这样做：

$('select').on('change', function() {

    $('option[disabled]').prop('disabled', false);
    var currentValue = $(this).val().split(' ').shift();
    $('select').not(this).find('option[value^="'+currentValue+'"]').prop('disabled', true);

});

^
：选择具有指定属性的元素，该属性的值以给定字符串开头

简短解决方案：您也可以像下面这样做：

$('select').on('change', function() {

    $('option[disabled]').prop('disabled', false);
    var currentValue = $(this).val().split(' ').shift();
    $('select').not(this).find('option[value^="'+currentValue+'"]').prop('disabled', true);

});

可能是这样的：演示：

您可以进行计数或其他任何操作，这只是确保值在其他下拉列表中被禁用，并在
未选中时重新启用

$(function () {
    var previous;

    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).on('change', function () {
        // Get the filter value
        var filterVal = $(this).val().substr(0, 3);
        var selector = 'option[value^="' + filterVal + '"]';
        others = $('select').not(this).find(selector);
        others.prop('disabled', true);

        // Now loop through and enable previous
        var oldFilterVal = previous.substr(0, 3);
        var oldSelector = 'option[value^="' + oldFilterVal + '"]';
        $('select').find(oldSelector).prop('disabled', false);
    });
});

可能是这样的：演示：

您可以进行计数或其他任何操作，这只是确保值在其他下拉列表中被禁用，并在
未选中时重新启用

$(function () {
    var previous;

    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).on('change', function () {
        // Get the filter value
        var filterVal = $(this).val().substr(0, 3);
        var selector = 'option[value^="' + filterVal + '"]';
        others = $('select').not(this).find(selector);
        others.prop('disabled', true);

        // Now loop through and enable previous
        var oldFilterVal = previous.substr(0, 3);
        var oldSelector = 'option[value^="' + oldFilterVal + '"]';
        $('select').find(oldSelector).prop('disabled', false);
    });
});

你试过什么？？？拿出点什么来。@Manwal抱歉！我用js提琴更新了我的帖子，有点乱！！！您的小提琴工作正常，问题出在哪里？您可以使用jquery split函数将值按“”拆分。和匹配。@jQueryAngryBird js fiddle不会禁用其他下拉列表的任何选项。我只能让它在存在重复国籍的情况下显示警报。您尝试了什么？？？拿出点什么来。@Manwal抱歉！我用js提琴更新了我的帖子，有点乱！！！您的小提琴工作正常，问题出在哪里？您可以使用jquery split函数将值按“”拆分。和匹配。@jQueryAngryBird js fiddle不会禁用其他下拉列表的任何选项。我只能让它在存在重复国籍的情况下显示警报。太棒了！是否可以对其进行调整，使其仅适用于页面上的特定下拉列表？您可以使用相同的类名，也可以将选择器更改为：
$（'select[name^=“item_meta”]”）
。唯一的问题是，如果用户更改其选择，以前选择的选项将在所有其他选择中保持禁用状态。因此，我们可以先启用所有选项，然后尝试禁用它。但是，只有一个选项将被禁用Superb！是否可以对其进行调整，使其仅适用于页面上的特定下拉列表？您可以使用相同的类名，也可以将选择器更改为：
$（'select[name^=“item_meta”]”）
。唯一的问题是，如果用户更改其选择，以前选择的选项将在所有其他选择中保持禁用状态。因此，我们可以先启用所有选项，然后尝试禁用它。但是，只有一个选项将被禁用。该选项将在选择位置中禁用该选项。您将在值匹配的所有选择中禁用选项，包括它所在的地方selected@billyonecan帮我做这个。为什么
.not（this）
在这里不起作用？因为
this
是一个
select
，您正在使用一系列
选项
非常感谢@billyonecan。我已经修好了。更新的ans ALSOTH将禁用“选择其所选位置”中的选项您正在禁用值匹配的所有选择中的选项，包括已选择的选项selected@billyonecan帮我做这个。为什么
.not（this）
在这里不起作用？因为
this
是一个
select
，您正在使用一系列
选项
非常感谢@billyonecan。我已经修好了。这是巨大的！这正是我所需要的——不过，我想将下拉列表分为两个单独的检查：玩家1到5和玩家（6到10）。修改代码来做到这一点有多容易？谢谢。是的，我已经在每个
选择
输入
group1
或
group2
上添加了一个类。然后修改和复制侦听器这是巨大的！这正是我所需要的——不过，我想将下拉列表分为两个单独的检查：玩家1到5和玩家（6到10）。修改代码来做到这一点有多容易？谢谢。是的，我已经在每个
选择
输入
group1
或
group2
上添加了一个类。然后修改侦听器并复制它们