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。

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

最佳答案

也许是这样的：演示：http://jsfiddle.net/robschmuecker/bA3Tb/3/

您可以进行计数或其他操作，这只是确保在其他下拉菜单中禁用该值，并在unselected时重新启用

$(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);
    });
});