select2

by Oleh Kotsubko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<div class="c-stage__panel c-stage__panel--mute u-pv-small collapse show" id="popular-news-form-ru" style="">
  <div class="u-mh-small u-flex u-flex-wrap">
    <div class="col-sm-3 u-mb-small">
      <div class="c-field u-mb-medium">
        <label class="c-field__label" for="main-article">Самая главная</label>

        <!-- Select2 jquery plugin is used -->
        <select class="c-select has-search" id="main-article" name="main-article">
          <option data-select2-id="8">1 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
          <option data-select2-id="51">2 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
          <option data-select2-id="52">3 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 u-mb-small">
      <div class="c-field u-mb-medium">
        <label class="c-field__label" for="main-vertical">Вертикальная</label>

        <!-- Select2 jquery plugin is used -->
        <select class="c-select has-search" id="main-vertical" name="main-vertical">
          <option data-select2-id="10">1 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
          <option data-select2-id="54">2 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
          <option data-select2-id="55">3 Daeja's View: Mid-Season Snapshot of the Dota 2 Pro Circuit Regions</option>
        </select>
      </div>
    </div>
  </div>
  <div class="u-mh-small u-flex u-flex-wrap">
    <div class="col-sm-3 u-mb-small">
      <div class="c-field u-mb-medium">
        <label class="c-field__label" for="third-article">Третья статья</label>

        <!-- Select2 jquery plugin is used -->
       ...

JavaScript

let popularFormRu = $('#popular-news-form-ru');

$('.c-select').select2();


function filterSelects(form) {
  let selects = form.find('.c-select');
  let values = [];
  let prevValues = [];
  let currentValue = '';
  
  function updateValues() {
  	selects.each(function (i) {
      values.push({
        index: i,
        value: $(this).val()
      });
    });
  }
  
  function clearValues() {
    values.splice(0, values.length);
  }
  
  function updateSelectValue(el) {
     return el.val();
  }
  
  function getPrevValues(arr) {
    return arr.map(function(el) {
      return el;
    });
  }
  
  function updateSelects() {
    prevValues.forEach(function(el, index) {
      if(currentValue === el.value && el.value !== null) {
        selects.eq(index).val(null).trigger('change');
      }
    });
  }
  
  function init() {
    
    updateValues();
    prevValues = getPrevValues(values);
    currentValue = selects.eq(0).val();
    prevValues.forEach(function(el, index) {
      if(currentValue === el.value && el.value !== null) {
        selects.eq(index + 1).val(null).trigger('change');
      }
    });
    
    console.log(currentValue);
    console.log(prevValues);
  }
  
  init();
 
  selects.on('change', function() {
    let self = $(this);
    currentValue = updateSelectValue(self);
    
    prevValues = getPrevValues(values);
    clearValues();
    updateValues();
    
    updateSelects();
  });
}

filterSelects(popularFormRu);