скрыть / показать div из опции выбора на ios - не работает

Question

Показать / скрыть div на основе опции выбора хорошо работает на настольном компьютере, но не на устройствах ios. Я уверен, что есть лучший способ структурировать мой jQuery для этого требования. В выпадающем списке ios вы можете отметить все выбранные параметры, а также выбрать и отменить выбор, чтобы увидеть следующую опцию. Мне нужно иметь возможность выбрать один вариант за раз.

$( function() {
        $( '#storeselector' ).on( 'input propertychange', function() {
            $( '.store-hide' ).hide();
            $( '#' + $(this).val() ).show();
        });
    });

.store-right {
  float: right;
}

.i-store {
  font-size: 3rem;
  font-family: "Avenir Next", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: inherit;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  display: block;
  margin: auto;
  text-align: right;
  padding-right: 4%;
}

.store-img {
  max-width: 1150px;
  width: 100%;
  margin: auto;
  display: block;
}

.store-hide {
  display: none;
}

.store-block {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="storeselector" tabindex="2" multiple size="3">
  <option value="level-lg">
    Lower Ground
  </option>
  <option value="level-g">
    Ground Floor
  </option>
  <option value="level-one">
    Level 1
  </option>

</select>

<div id="level-lg" class="store-hide store-block" style="display: block">
  <div class="col-lg-12">
    <span class="i-store">
                                LG
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dw468e879c/UK/SS18/Book6/hp-recs1_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-g" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                G
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwc0f6b72a/UK/SS18/Book6/hp-recs2_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-one" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                1
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwe06b0b29/UK/SS18/Book6/hp-recs3_UK.jpg" alt="" title="">
  </div>
</div>

Answer 1

Вы должны использовать input event вместо change event. Потому что change event может работать не во всех браузерах.

Событие Change возникает в большинстве браузеров, когда содержимое изменяется, и элемент теряет фокус, в основном совокупность изменений. Вы не увидите этого срабатывания для каждого изменения в отличие от события ввода.

Событие Input запускается синхронно при изменении содержимого элемента. Таким образом, вы увидите, что это событие происходит чаще. Поддержка браузеров может быть разной.

Итак, событие input очень полезно для отслеживания изменений <select> полей. Однако это не поддерживается в IE version < 9. Но в более старых версиях IE есть собственное событие onpropertychange, аналогичное oninput. Таким образом, вы можете использовать его таким образом, чтобы иметь полную поддержку кросс-браузера .:

$( selector ).on( 'input propertychange' );

Итак, ваш код JavaScript должен быть таким:

$( function() {
    $( '#storeselector' ).on( 'input propertychange', function() {
        $( '.store-hide' ).hide();
        $('#storeselector option:selected' ).each( function() {
            $( '#' + $(this).val() ).show();
        } )
    } );
} );