设置隐藏的下拉列表选定值会导致在iOS 11 Safari中重新加载页面

Question

这是我的场景。我正在使用引导下拉菜单来创建一个花哨的选择菜单。用于验证和表单发布目的的实际<select>将其可见性设置为隐藏。有相应的脚本用于在单击引导下拉列表<a>链接时设置<select>的选定值。

这是我的代码片段。

<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")).设置值是导致问题的原因，我将其更改为香草javascript，但仍然发生错误。

在测试中，我使<select>可见，问题消失了。因此，这似乎是一个问题，特别是当<select>不可见时更改它的选定值。我尝试添加脚本以在设置所选值之前暂时使其可见，但这并没有解决问题，更改可见性并在 setTimeout 中选择新值也没有。

Answer 1

经过许多不同的尝试来解决这个问题，我找到了一种适用于所有浏览器的解决方法，不会破坏我的 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;
});

我做了很多搜索，但没有找到任何可行的解决方案，所以我发布这个，因为它可以帮助其他人。