从 ios 上的选择选项中隐藏/显示 div - 不工作

Posted 2023-03-11

【中文标题】从 ios 上的选择选项中隐藏/显示 div - 不工作

【英文标题】：hide/show div from select option on ios - not working

【发布时间】：2018-05-10 09:32:41

【问题描述】：

基于选择选项的显示/隐藏 div 在桌面上运行良好，但在 ios 设备上运行良好。我确信有更好的方法来构建我的 jQuery 来满足这个要求。在 ios native 下拉菜单中，您可以勾选所有选择选项，还必须选择和取消选择才能看到下一个选项。我需要能够一次选择一个选项。

$( 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"  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"  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"  title="">
  </div>
</div>

【问题讨论】：

您的问题到底是什么？正如你的帖子现在看起来的那样，它可能只会引发很多毫无意义的讨论。你能说得更具体点吗？

请编辑您的问题并删除最后一条评论。这是正确的做法。有空可以看看这个：***.com/help/how-to-ask

【参考方案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();
         )
     );
 );

【讨论】：

好建议！但是，这并不能解决 ios 上的问题。仍然必须选择和取消选择才能看到下一个选项。

您必须使用 JQuery each() 方法。 each() 方法指定为每个匹配元素运行的函数。我更新代码。请检查一下。

不成功 - 我仍然必须取消选择上一个选项并选择下一个选项才能在 IOS 上查看下一个选项