Отобразить информацию, после выбора select

Question

Здраствуйте, проблема в следующем, есть select

const selector = $('.evidence-select');

function update() {
  const value = selector.val();
  const theIndex = parseInt(value) - 1;
  $('.evidence-content').each(function(index, el) {
    $(el)[index === theIndex ? 'show' : 'hide']();
  });
};

selector.on('click', update);
update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="wheredevaice" class="evidence-select">
  <option value="1">Животные</option>
  <optgroup label="Недвижимость">
    <option value="2">Дом</option>
    <option value="3" selected>Дача</option>
  </optgroup>
</select>

Нужно чтобы после выбора "Животные" выводило блок с формой, выводит на пк нормально, но на телефоне проблемы, после выбора нужно еще раз нажать на select( чтобы показалось меню ) и покажет уже нормально, в чем может быть проблема, буду рад если предложите свой вариант решения проблемы.

Еще раз напишу, что нужно показать блок, после выбора option "Животные", на форумах уже был, читал и тестил, на вас последний шанс

Answer 1

Вы используете событие click, поэтому при нажатии он берет значение при клике на селект. Но в этот момент в селекте остается старое значение, поэтому и приходится нажимать на селект второй раз, чтобы отобразился блок, соответствующий новому значению. Используйте событие change вместо click:

const selector = $('.evidence-select');

function update() {

  const value = selector.val();

  const theIndex = parseInt(value) - 1;

  $('.evidence-content').each(function(index, el) {

    $(el)[index === theIndex ? 'show' : 'hide']();

  });


};

selector.on('change', update);

update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="wheredevaice" class="evidence-select">
  <option value="1">Животные</option>
  <optgroup label="Недвижимость">
    <option value="2">Дом</option>
    <option value="3" selected>Дача</option>
  </optgroup>
</select>

<div class="evidence">
  <div class="evidence-content">123</div>
  <div class="evidence-content">456</div>
  <div class="evidence-content">789</div>
</div>

БЛОГ НА HUSL

Отобразить информацию, после выбора select

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