使用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>
答
试试这个:
<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而不是使用点击选项。
梦幻般的工作!我不知道这很简单。非常感谢... – Chris