jquery - 设置隐藏的下拉选择值会导致 iOS 11 Safari 中的页面重新加载
问题描述
这是我的场景。我正在使用引导下拉菜单来创建精美的选择菜单。<select>
用于验证和表单发布目的的实际将其可见性设置为隐藏。<select>
单击引导下拉<a>
链接时,有相应的脚本来设置 的选定值。
这是我的代码片段。
<div class="dropdown dropdown-select">
<button class="btn btn-default dropdown-toggle" id="cardSelector" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="selected-value">- Select Credit Card -</span>
<span class="fa fa-angle-down"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="cardSelector">
<li data-bind="visible: model.HasValidCardOnFile()"><a href="#" data-value="1">- Existing Credit Card -</a></li>
<li><a href="#" data-value="0">- New Credit Card -</a></li>
</ul>
@Html.DropDownListFor(m => m.CardTypeId, Model.GetCardTypeSelectList(),
new { data_bind = "value: modelInput.CardTypeId", @class = "requires-validation" })
</div>
@Html.ValidationMessageFor(m => m.CardTypeId)
$(".dropdown-select").on('click', '.dropdown-menu a', function () {
var $this = $(this);
var $dropdownCtrl = $this.closest(".dropdown-select");
$dropdownCtrl.find("select").val($this.data("value")).trigger("change");
$dropdownCtrl.find(".selected-value").html($this.html());
$dropdownCtrl.removeClass("open");
return false;
});
问题是在 iOS 11 safari 中,页面因“发生意外问题。页面已重新加载”之类的错误而爆炸。
我已经追溯到这段代码$dropdownCtrl.find("select").val($this.data("value"))
。设置值是导致问题的原因,我将其更改为 vanilla javascript 并且错误仍然发生。
在测试中,我使<select>
可见并且问题消失了。<select>
因此,在不可见时更改 a 的选定值似乎是一个问题。我尝试在设置所选值之前添加脚本以暂时使其可见,但这并没有解决问题,也没有更改可见性并在 setTimeout 中选择新值。
解决方案
在多次尝试解决该问题后,我发现了一种适用于所有浏览器的解决方法,不会破坏我的 jquery 验证或表单提交。
我的解决方案是清除<select>
列表并使用 javascript 在单击项目时重新添加所选选项。
html部分没有变化,脚本改成了这个
$(".dropdown-select").on('click', '.dropdown-menu a', function () {
var $this = $(this);
var $dropdownCtrl = $this.closest(".dropdown-select");
var $selectCtrl = $dropdownCtrl.find("select");
$selectCtrl.empty();
var $selectedOption = $("<option value='" + $this.data("value") + "' selected='selected'>" + $this.text() + "</option>");
$selectCtrl.append($selectedOption);
$selectCtrl.trigger("change");
$dropdownCtrl.find(".selected-value").html($this.html());
$dropdownCtrl.removeClass("open");
return false;
});
我做了很多搜索,但没有找到任何可行的解决方案,所以我发布这个是为了避免对其他人有帮助。
推荐阅读
- java - Spring数据查询多对一列
- git - git结帐
- jquery - datepicker end_date 仅在第一次单击“on”事件时更改,然后当下一个事件单击“on”时 end_date 上的 datepicker 不会更改?
- ddl - 频繁执行 DDL 会影响 Syncer 中的数据同步速度吗?
- ios - UICollectionView 中的多个不同的 Admob 横幅广告
- lucene - 在 lucene 7.3 中创建自定义标记器时发生错误
- reactjs - .Net Core 2.0 react redux 模板更新 webpack
- c# - 如何在 xUnit 中对多个类实例进行单元测试
- drag-and-drop - 当我在林间空地中使用 GtkScrolledWindow 时出现奇怪的问题
- sql - SQL - 添加新列而不影响现有脚本