jQuery显示/隐藏选择器在iPhone原生下拉框的兼容问题求助

嘿，我完全懂你现在的困扰：桌面端用着好好的选择器，到了iPhone的原生下拉框里，用户居然得先取消当前选中的选项才能选下一个，体验太别扭了！你想要的是选新选项时自动隐藏上一个内容，始终只显示一块，用jQuery的显示/隐藏来实现对吧？

为啥会这样？ #

其实问题出在iOS的原生select控件上——它是系统自带的组件，交互逻辑和桌面端不一样：点击后会弹出一个模态的选项列表，只有当用户选中新选项并关闭这个列表时，才会触发change事件。桌面端是选完就触发，所以在iPhone上用户就会觉得“必须先取消当前选项才能切换”。

两种解决方案任你选 #

方案1：小改现有代码，适配原生控件

你的原有逻辑其实没问题，只要加一点点细节优化，就能在iOS上稳定运行：

$(function() {
  // 页面加载时先初始化：隐藏所有内容，只显示默认选中的项
  const defaultSelected = $('#storeselector').val();
  $('.store-hide').hide();
  if (defaultSelected) {
    $('#' + defaultSelected).show();
  }

  // 绑定change事件处理切换
  $('#storeselector').on('change', function() {
    const selectedValue = $(this).val();
    // 先把所有内容藏起来，再显示选中的那一个
    $('.store-hide').hide();
    if (selectedValue) {
      $('#' + selectedValue).show();
    }
  });

  // 针对iOS的小补丁：点击下拉框时记录当前选中值，避免重复选同一项没反应
  $('#storeselector').on('touchstart', function() {
    $(this).data('previousValue', $(this).val());
  });
});

CSS就用你原来的就行：

.store-right { 
  float: right; 
} 
.i-store { 
  font-size: 3rem; 
  font-family: "Av..."; /* 记得补全你的完整字体名哦 */
}

这个方案的好处是改动极小，主要是确保初始化状态正确，还解决了iOS上重复选同一选项不触发change的小问题。

方案2：换成自定义下拉框，完全掌控交互

如果原生控件的限制实在忍不了，那干脆自己做个下拉框，想怎么交互就怎么交互：

<!-- 自定义下拉框的HTML结构 -->
<div class="custom-select">
  <div class="select-trigger" id="custom-trigger">请选择门店</div>
  <ul class="select-options" id="custom-options">
    <li data-val="store1">门店1</li>
    <li data-val="store2">门店2</li>
    <li data-val="store3">门店3</li>
  </ul>
</div>

<!-- 你的内容块 -->
<div id="store1" class="store-hide">门店1的专属内容</div>
<div id="store2" class="store-hide">门店2的专属内容</div>
<div id="store3" class="store-hide">门店3的专属内容</div>

/* 自定义下拉框的样式，可以根据你的需求调整 */
.custom-select {
  position: relative;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 10px;
}
.select-trigger {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 100;
}
.select-options li {
  padding: 10px 15px;
  cursor: pointer;
}
.select-options li:hover,
.select-options li.active {
  background-color: #f8f8f8;
}
.store-hide {
  display: none;
}
.store-right { 
  float: right; 
} 
.i-store { 
  font-size: 3rem; 
  font-family: "Av...";
}

$(function() {
  const $trigger = $('#custom-trigger');
  const $options = $('#custom-options');
  const $contentBlocks = $('.store-hide');

  // 点击触发器展开/收起选项列表
  $trigger.on('click touchstart', function(e) {
    e.stopPropagation();
    $options.toggle();
  });

  // 点击选项时切换内容
  $options.on('click touchstart', 'li', function() {
    const selectedVal = $(this).data('val');
    // 更新触发器显示的文本
    $trigger.text($(this).text());
    // 隐藏所有内容块，显示选中的那一个
    $contentBlocks.hide();
    $('#' + selectedVal).show();
    // 收起选项列表
    $options.hide();
    // 标记当前选中的选项
    $options.find('li').removeClass('active');
    $(this).addClass('active');
  });

  // 点击页面其他地方时收起选项列表
  $(document).on('click touchstart', function() {
    $options.hide();
  });

  // 初始化默认选中第一项
  const defaultOption = $options.find('li:first');
  if (defaultOption.length) {
    $trigger.text(defaultOption.text());
    $('#' + defaultOption.data('val')).show();
    defaultOption.addClass('active');
  }
});

这个方案的好处是完全摆脱了原生控件的限制，在iOS上和桌面端的交互体验完全一致：用户一点击选项，内容立刻切换，根本不需要等模态框关闭，完美实现你“一次仅显示一个”的需求。

怎么选？ #

• 想快速搞定、改动最小，就用方案1；
• 追求完美的交互体验，就用方案2。

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