在 IOS Safari 上使用 Select (Dropdown) 的 JQuery 显示/隐藏问题

Posted 2023-03-14

【中文标题】在 IOS Safari 上使用 Select (Dropdown) 的 JQuery 显示/隐藏问题

【英文标题】：JQuery show/hide issue using Select (Dropdown) on IOS Safari

【发布时间】：2017-08-02 10:46:29

【问题描述】：

我正在努力解决这个问题，并到处寻找有效的答案。据我所知，该问题仅适用于 ios 设备。

我有一个带有选项的选择（下拉）元素。当用户选择一个选项时，将显示与该选项对应的 div。该脚本根据需要显示和隐藏 div。

在iOS 10上使用Safari时出现问题出现。旋转轮显示选项，但在选择选项并单击完成时，没有任何反应。

Onclick 事件不会触发或什么的。

在桌面浏览器上运行良好。

任何帮助将不胜感激。

function showonlyone(thechosenone) 
  $('.hidebox').each(function(index) 
    if ($(this).prop("id") == thechosenone) 
      $(this).show(200);
     else 
      $(this).hide(600);
    
  );

.hidebox 
  display: none;
  cursor: pointer;


.showbox 
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selection">
  <select class="form-control">
      <option onclick="showonlyone('newboxes1');">Option 1</option>
      <option onclick="showonlyone('newboxes2');">Option 2</option>
      <option onclick="showonlyone('newboxes3');">Option 3</option>
      <option onclick="showonlyone('newboxes4');">Option 4</option>
  </select>
</div>

<div id="container" style="margin-top:20px">
  <div class="hidebox showbox" id="newboxes1">Selected 1</div>
  <div class="hidebox" id="newboxes2">Selected 2</div>
  <div class="hidebox" id="newboxes3">Selected 3</div>
  <div class="hidebox" id="newboxes4">Selected 4</div>
</div>

【参考方案1】：

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>function showonlyone(thechosenone) 

  $('.hidebox').each(function(index) 

    if ($(this).attr("id") == thechosenone) 
      $(this).show(200);
     else 
      $(this).hide(600);
    
  );
</script>

使用 attr 获取属性值。

<div id="selection">
  <select class="form-control" onchange="showonlyone(this.value)">
      <option value="newboxes1">Option 1</option>
      <option value="newboxes2">Option 2</option>
      <option value="newboxes3">Option 3</option>
      <option value="newboxes4">Option 4</option>
  </select>
</div>

<div id="container" style="margin-top:20px">
  <div class="hidebox showbox" id="newboxes1">Selected 1</div>
  <div class="hidebox" id="newboxes2">Selected 2</div>
  <div class="hidebox" id="newboxes3">Selected 3</div>
  <div class="hidebox" id="newboxes4">Selected 4</div>
</div>

在选择标签中使用onchange，而不是使用点击选项。

【参考方案2】：

尝试使用其他功能。 example here

【讨论】：

这个解决方案也可以通过一些修改来工作。非常感谢您的宝贵时间..