javascript - 如何在Select2插件中禁用选项？

如您所见，这里有2个选择小部件，我在其中使用Select 2插件。

两个选择小部件都使用相同的值列表（在本例中为categories）。如果用户选择在第一个窗口小部件中说Audi，我想在第二个窗口小部件中禁用该选项。怎么做？

var categories = ['BMW', 'Bentley', 'Audi', 'Aston Martin', 'Alfa Romeo'];

$("#first-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$("#second-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$('#first-widget').on('select2:select', function (e) {
    // Do something
});

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">

<div class="card mb-5">
  <div class="card-header">Сompare</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-6">
          <label for="first-widget">First widget</label>
          <select id="first-widget" class="form-control"></select>
        </div>
        <div class="col-md-6">
          <label for="second-widget">Second widget</label>
          <select id="second-widget" class="form-control"></select>
        </div>
       </div>
     </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

最佳答案

我认为您需要设置一个占位符，因为它对预选值没有意义，然后必须使用templateResult（）函数创建一个自定义属性，其中包含每个选项的值：

// Select2 defaults
    $.fn.select2.defaults.set( 'placeholder', 'Select' );

    var categories = [ 'BMW', 'Bentley', 'Audi', 'Aston Martin', 'Alfa Romeo' ];
    var firstWidget = $( '#first-widget' ), secondWidget = $( '#second-widget' );
    var currentValue = '';

    firstWidget.select2( {
        data: categories,
        allowClear: false,
        minimumResultsForSearch: -1
    } );

    secondWidget.select2( {
        data: categories,
        allowClear: false,
        minimumResultsForSearch: -1,
        templateResult: function ( optData, optElement ) {
            $( optElement ).attr( 'data-value', optData.text );

            return optData.text;
        }
    } );

    firstWidget.on( 'select2:select', function () {
        var optionSelectedVal = this.value;
        var optionSelectedEl = secondWidget.find( 'option[value="' + optionSelectedVal + '"]' );
        if ( optionSelectedEl.length ) {
            if ( currentValue != '' ) {
                secondWidget.find( 'option[value="' + currentValue + '"]' ).attr( 'disabled', false );
            }

            // If secondWidget value is equal to optionSelectedVal then set it to empty
            if ( secondWidget.val() === optionSelectedVal ) {
                secondWidget.val( null ).trigger( 'change' );
            }

            // Disable <option> element in the secondWidget
            optionSelectedEl.prop( 'disabled', true );

            // Current value
            currentValue = optionSelectedVal;
        }
    } );

    secondWidget.on( 'select2:open', function () {
        setTimeout( function () {
            // Disable the option in the select2 results
            var select2ResultOption = $( 'li.select2-results__option[data-value="' + currentValue + '"]' );
            select2ResultOption.attr( 'aria-disabled', true );
            select2ResultOption.removeAttr( 'aria-selected' );
        } );
    } );

您可以在此处查看：http://jsfiddle.net/u3tq89wg/

关于javascript - 如何在Select2插件中禁用选项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53362543/