Как в плагине Select2 отключить опцию? - PullRequest
Новая
       9

Как в плагине Select2 отключить опцию?

0 голосов
/ 18 ноября 2018

Как вы можете видеть там 2 выберите виджет, где я использую Выберите 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>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Я думаю, вам нужно установить заполнитель, потому что он не имеет смысла с предварительно выбранным значением, а затем вы должны использовать функцию 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/

0 голосов
/ 18 ноября 2018

@ Нуржан Ногербек, как ты можешь. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<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>
<script>
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('change', function (e) {
// Do something
if($("#first-widget").val() == "Audi")
{
$("#second-widget>option[value='Audi']").prop('disabled',true);
$('select').select2();
}
else
{
 $("#second-widget>option[value='Audi']").prop('disabled',false);
 $('select').select2(); 
}
});
</script>
</body>
</html>
...