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

在您的更改处理程序内部，遍历每个select，然后在其他option中查找匹配的selects，并将其停用：

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

Answer 2

尝试使用过滤器：

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

Demo

Answer 3

^ Jquery selector：选择具有指定属性的元素，其值始于给定字符串。

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

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

});

Updated DEMO

Answer 4

也许是这样的：演示：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);
    });
});

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

4 个答案:

Here's a fiddle

Demo