选择器功能在桌面上运行良好,但在本机iphone下拉列表中,您必须取消选择选项才能看到下一个选择。有没有人对如何通过show和隐藏jQuery解决这个问题有任何建议。基本上如果选择下一个选项删除前一个并一次显示一个?
$(function() {
$('#storeselector').change(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>
&#13;