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

Question

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

<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。

更新:我一直在尝试以下操作:http://jsfiddle.net/Webby2014/bA3Tb/

Answer 1

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

// 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);

});

Here's a fiddle