При выборе одного из Select, сбросить остальные на дефолтные

Question

К примеру, в блоке div, имеются 4 select. Как сделать, чтобы при выборе одного из селектов, остальные сбрасывались на дефолтные?

Нашел вот такую конструкцию, но она сбрасывает только первый селект.


$('select', '#sloi-1').focus(function(){
    $('select:not(:focus) option:eq(0)', '#sloi-1').prop('selected',true)
 })
});

Answer 1

jquery

$('select').change(function(){
  $('select').not(this).each(function(){
    this.selectedIndex = 0;
  })  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value='1_first'>Первый</option>
  <option value='1_second'>Второй</option>
  <option value='1_third'>Третий</option>
</select>

<select>
  <option value='2_first'>Первый</option>
  <option value='2_second'>Второй</option>
  <option value='2_third'>Третий</option>
</select>

<select>
  <option value='3_first'>Первый</option>
  <option value='3_second'>Второй</option>
  <option value='3_third'>Третий</option>
</select>

js

let sel = document.querySelectorAll('select');
sel.forEach(item => {
  item.addEventListener('change', function(){
    sel.forEach(el => {
      if (el !== this) el.selectedIndex = 0;
    })
  })
})

<select>
  <option value='1_first'>Первый</option>
  <option value='1_second'>Второй</option>
  <option value='1_third'>Третий</option>
</select>

<select>
  <option value='2_first'>Первый</option>
  <option value='2_second'>Второй</option>
  <option value='2_third'>Третий</option>
</select>

<select>
  <option value='3_first'>Первый</option>
  <option value='3_second'>Второй</option>
  <option value='3_third'>Третий</option>
</select>

БЛОГ НА HUSL

При выборе одного из Select, сбросить остальные на дефолтные

Ответы (1 шт):