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

Posted 2023-02-23

【中文标题】设置隐藏的下拉选择值会导致 iOS 11 Safari 中的页面重新加载

【英文标题】：Setting hidden dropdown selected value causes page reload in iOS 11 safari

【发布时间】：2018-09-21 19:10:33

【问题描述】：

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

这是我的代码的 sn-p。

<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> 的选定值似乎是一个问题。我尝试在设置所选值之前添加脚本以暂时使其可见，但这并没有解决问题，也没有更改可见性并在 setTimeout 中选择新值。

【参考方案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;
);

我进行了很多搜索，但没有找到任何可行的解决方案，因此我发布此内容是为了避免对其他人有所帮助。