使用IOS上的選擇（下拉）Safari的JQuery顯示/隱藏問題

我正在努力解決這個問題，並搜索了一個有效的答案。只要我能測試，這個問題只適用於IOS設備。使用IOS上的選擇（下拉）Safari的JQuery顯示/隱藏問題

我有一個select（下拉）元素的選項。當用戶選擇一個選項時，顯示與該選項對應的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>

來源

2017-08-02 Chris

試試這個：

<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而不是使用點擊選項。

來源

2017-08-02 11:22:20

夢幻般的工作！我不知道這很簡單。非常感謝... – Chris

嘗試使用其他功能。 example here

來源

2017-08-02 11:15:48

該解決方案也適用於一些修改。非常感謝你的時間.. – Chris

使用IOS上的選擇（下拉）Safari的JQuery顯示/隱藏問題

回答

相關問題