iOS端基于Select选项显示/隐藏Div功能失效问题

我来帮你搞定这个在iOS上失效的select切换div问题，同时把多选模式改成单选，下面是具体的解决方案：

问题根源 #

你的代码有两个核心问题：

• 用了带multiple属性的select，iOS原生会把它处理成可多选的下拉框，必须手动取消之前的选中项才能切换，不符合你的单选需求
• 绑定的input/propertychange事件在iOS Safari上对select元素的支持不完善，导致切换选项时无法触发显示/隐藏逻辑

1. 把Select改成单选模式 #

直接移除select标签里的multiple和size="3"属性，这样就变成标准的单选下拉框，iOS上会自动处理成单选行为，不用手动取消之前的选项：

<select id="storeselector" tabindex="2">
  <option value="level-lg"> Lower Ground </option>
  <option value="level-g"> Ground Floor </option>
  <option value="level-one"> Level 1 </option>
</select>

2. 修复事件绑定适配iOS #

将原来的input propertychange事件替换成标准的change事件，这是select元素状态变更的通用事件，在所有浏览器（包括iOS）都能稳定触发：

$(function() {
  $('#storeselector').on('change', function() {
    // 先隐藏所有店铺区块
    $('.store-hide').hide();
    // 显示选中项对应的区块
    $('#' + $(this).val()).show();
  });
});

3. 可选：优化初始显示状态 #

如果希望页面加载时默认显示第一个选项对应的区块，可以给第一个option加上selected属性，确保初始状态正确：

<select id="storeselector" tabindex="2">
  <option value="level-lg" selected> Lower Ground </option>
  <option value="level-g"> Ground Floor </option>
  <option value="level-one"> Level 1 </option>
</select>

完整修复后的代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="storeselector" tabindex="2">
  <option value="level-lg" selected> 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>

CSS #

.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%; }

JavaScript #

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

这些修改的优势：

• 单选模式符合需求，iOS用户不用再手动取消之前的选中项
• change事件的兼容性更好，解决了iOS上事件不触发的问题
• 代码逻辑更简洁，避免了不必要的事件监听

内容的提问来源于stack exchange，提问作者user3767554