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

Question

正如你所看到的，我使用了 2 个选择小部件 Select 2插件。

两个选择小部件都使用相同的值列表(在我的例子中为categories)。如果用户在第一个小部件中选择“奥迪”，我想在第二个小部件中禁用该选项。如何制作？

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>

Answer 1

我认为您需要设置一个占位符，因为它对预先选择的值没有意义，然后您必须使用 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/