设置隐藏的下拉选择值会导致页面在 iOS 11 safari 中重新加载
Setting hidden dropdown selected value causes page reload in iOS 11 safari
这是我的场景。我正在使用 bootstrap 下拉菜单来创建精美的 select 菜单。用于验证和表单 post 目的的实际 <select>
已将其可见性设置为隐藏。单击 bootstrap 下拉菜单 <a>
link 时,有相应的脚本来设置 <select>
的 selected 值。
这是我的代码片段。
<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 中,页面爆炸并出现类似 "An unexpected problem occurred. The page was reloaded."
的错误
我已经将其追溯到这段代码 $dropdownCtrl.find("select").val($this.data("value"))
。设置值是导致问题的原因,我将其更改为香草javascript,但仍然出现错误。
在测试中,我使 <select>
可见,问题就消失了。因此,当 <select>
不可见时更改其 selected 值似乎是一个问题。我尝试添加脚本以在设置 selected 值之前暂时使其可见,但这并没有解决问题,更改可见性和 selecting 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;
});
我进行了大量搜索,但没有找到任何可行的解决方案,所以我将其发布以防它对其他人有所帮助。
这是我的场景。我正在使用 bootstrap 下拉菜单来创建精美的 select 菜单。用于验证和表单 post 目的的实际 <select>
已将其可见性设置为隐藏。单击 bootstrap 下拉菜单 <a>
link 时,有相应的脚本来设置 <select>
的 selected 值。
这是我的代码片段。
<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 中,页面爆炸并出现类似 "An unexpected problem occurred. The page was reloaded."
的错误我已经将其追溯到这段代码 $dropdownCtrl.find("select").val($this.data("value"))
。设置值是导致问题的原因,我将其更改为香草javascript,但仍然出现错误。
在测试中,我使 <select>
可见,问题就消失了。因此,当 <select>
不可见时更改其 selected 值似乎是一个问题。我尝试添加脚本以在设置 selected 值之前暂时使其可见,但这并没有解决问题,更改可见性和 selecting 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;
});
我进行了大量搜索,但没有找到任何可行的解决方案,所以我将其发布以防它对其他人有所帮助。