0

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

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


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

1 ответ 1

0

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>

1
  • Спасибо за оперативный и развернутый ответ! 22 ноя 2022 в 10:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.