Safari浏览器表单提交失效问题及跨浏览器兼容方案咨询

我帮你排查了下代码里的问题，Safari不生效主要是几个关键问题导致的，咱们一步步来修复：

先说说你的代码里的核心问题 #

• 重复ID违反HTML规范：你的<div>和<select>都用了id="select"，页面里ID必须唯一，Safari对这种不规范的HTML解析更严格，会直接导致元素选择异常。
• 函数逻辑完全错误：findmyvalue()里的逻辑根本不是“选中就提交”——你先去拿表单的value（表单本身没有这个属性），然后又给表单绑定了click事件。这意味着第一次选选项时，只是给表单加了个点击提交的绑定，得点击表单才会提交，完全不符合你的需求。
• 冗余的混合写法：没必要同时混用原生JS和jQuery选择器，反而容易出兼容问题。

方案1：快速修正现有代码（兼容所有浏览器） #

先把HTML里的重复ID改掉：

<form action="New1.php" method="post" style="margin:0;" id="fonts" >
<div style="margin-right:15px;" id="select-container"> <!-- 把原来的select ID改成不重复的 -->
<select class="selectpicker rounded" id="font-select" name="select" style="font-size:16px; padding:2px 29px 2px 3px; border:1px solid #929292!important; max-width:250px;" data-live-search="true" data-width="5%">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</form>

然后修正JS函数，直接提交表单就行：

function findmyvalue() {
  // 直接提交表单，不用搞多余的绑定
  $("#fonts").submit();
}

保留select上的onchange="findmyvalue()"即可，这样选完就会直接提交。

方案2：更优雅的无内联事件写法（推荐） #

这种写法符合现代前端规范，避免内联事件，也更不容易出浏览器兼容问题：

HTML（去掉内联的onchange属性） #

<form action="New1.php" method="post" style="margin:0;" id="fonts" >
<div style="margin-right:15px;" id="select-container">
<select class="selectpicker rounded" id="font-select" name="select" style="font-size:16px; padding:2px 29px 2px 3px; border:1px solid #929292!important; max-width:250px;" data-live-search="true" data-width="5%">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</form>

jQuery代码（放在DOM加载完成的回调里） #

$(document).ready(function() {
  // 给下拉框绑定change事件
  $("#font-select").on("change", function() {
    // 触发表单提交
    $("#fonts").submit();
  });
});

特别注意：如果你用了Bootstrap Select插件 #

看你的select加了selectpicker类，应该是用了Bootstrap Select插件。这种情况下，原生的change事件可能不会被正确触发（尤其是在Safari里），必须用插件提供的专属事件：

$(document).ready(function() {
  // 监听Bootstrap Select的变更事件
  $("#font-select").on("changed.bs.select", function() {
    $("#fonts").submit();
  });
});

这个是最容易被忽略的点，很多时候Safari里不生效就是因为没监听插件的正确事件。

内容的提问来源于stack exchange，提问作者user14772332