Установка скрытого выпадающего выбранного значения вызывает перезагрузку страницы в iOS 11 Safari

Question

Вот мой сценарий.Я использую выпадающий список начальной загрузки, чтобы создать необычное меню выбора.Фактический <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 страница взрывается с ошибкой, похожей на «Произошла непредвиденная проблема. Страница была перезагружена».Установка значения - это то, что вызывает проблему, я изменил его на vanilla 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;
});

Я много искал, но не сделалЯ не нахожу жизнеспособных решений, поэтому я публикую это на случай, если это поможет кому-то другому.