草庐IT

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

coder 2024-01-22 原文

这是我的场景。我正在使用 Bootstrap 下拉菜单来创建一个精美的选择菜单。实际<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")) .设置值是导致问题的原因，我将其更改为普通 javascript，但仍然出现错误。

在测试中我做了 <select>可见，问题就消失了。因此，更改 <select> 的选定值似乎是一个问题当它不可见时。我尝试添加脚本以在设置所选值之前暂时使其可见，但这并没有解决问题，更改可见性和在 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;
});

我进行了大量搜索，但没有找到任何可行的解决方案，所以我将其发布以防它对其他人有所帮助。

关于jquery - 设置隐藏的下拉选择值会导致页面在 iOS 11 safari 中重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52449821/

jquerysafari34codeselectioshtml-selectios11

有关jquery - 设置隐藏的下拉选择值会导致页面在 iOS 11 safari 中重新加载的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  3. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  4. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  5. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  6. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  10. ruby - 安装libv8(3.11.8.13)出错，Bundler无法继续 - 2

    运行bundleinstall后出现此错误:Gem::Package::FormatError:nometadatafoundin/Users/jeanosorio/.rvm/gems/ruby-1.9.3-p286/cache/libv8-3.11.8.13-x86_64-darwin-12.gemAnerroroccurredwhileinstallinglibv8(3.11.8.13),andBundlercannotcontinue.Makesurethat`geminstalllibv8-v'3.11.8.13'`succeedsbeforebundling.我试试gemin

随机推荐