为什么没有在Safari工作JQuery的下拉列表过滤？ [重复]

Question

这个问题已经在这里有一个答案：

• JQuery Hide Option doesn't work in IE and Safari 6个回答
• jQuery filtering select options does not work in Safari (but works in Chrome and FF) 2个回答

我创建了一个HTML和JS（JQuery的）形式与多个下拉列表，从一到下一个过滤器的值。从brand1所以选择brand1时只产品中。

这工作得很好Chrome浏览器，但不会在Safari没有（与JS在安全设置）。

有没有别的东西，我需要做的，让Safari幸福吗？

Here's the jsFiddle.

$(document).ready(function() {
  $("#brand").on("change", function() {
    var selectbrand = $("#brand").val();
    $("#model option").attr("hidden", "hidden");
    $("#model option[data-for='" + selectbrand + "']").removeAttr("hidden");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brand">
  <option data-for="default">Select your brand</option>
  <option data-for="1">1</option>
  <option data-for="2">2</option>
  <option data-for="3">3</option>
</select>

<select id="model">
  <option data-for="default">Select your model</option>
  <option data-for="1" value="1 Model 1">1 Model 1</option>
  <option data-for="1" value="1 Model 2">1 Model 2</option>
  <option data-for="2" value="2 Model 1">2 Model 1</option>
  <option data-for="2" value="2 Model 2">2 Model 2</option>
  <option data-for="3" value="3 Model 1">3 Model 1</option>
</select>

Answer 1

注意你的小提琴是“上载”，因为你有$(document).ready将失败

更新：jQuery filtering select options does not work in Safari (but works in Chrome and FF)

这里是一个更好的版本。

const models = {
  "brand1" : [ "1 Model 1", "1 Model 2" ],
  "brand2" : [ "2 Model 1", "2 Model 2" ],
  "brand3" : [ "3 Model 1" ]
}

$(function() {
  $("#brand").on("change", function() {
    var selectbrand = $("#brand").val(), domSel = $("#model")[0];
    domSel.selectedIndex=0;
    domSel.options.length=1;
    if (selectbrand) {
      $.each(models[selectbrand],function(_,model) {
        $("#model").append("<option value='"+model+"'>"+model+"</option>")
      });  
    }  
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brand">
  <option value="">Select your brand</option>
  <option value="brand1">Brand 1</option>
  <option value="brand2">Brand 2</option>
  <option value="brand3">Brand 3</option>
</select>

<select id="model">
  <option value="">Select your model</option>
</select>

旧码

$(function() {
  $("#brand").on("change", function() {
    var selectbrand = $("#brand").val();
    $("#model")[0].selectedIndex=0;
    $("#model option").hide();
    $("#model option[data-for='" + selectbrand + "']").show();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brand">
  <option data-for="default">Select your brand</option>
  <option data-for="1">1</option>
  <option data-for="2">2</option>
  <option data-for="3">3</option>
</select>

<select id="model">
  <option data-for="default">Select your model</option>
  <option data-for="1" value="1 Model 1">1 Model 1</option>
  <option data-for="1" value="1 Model 2">1 Model 2</option>
  <option data-for="2" value="2 Model 1">2 Model 1</option>
  <option data-for="2" value="2 Model 2">2 Model 2</option>
  <option data-for="3" value="3 Model 1">3 Model 1</option>
</select>

Answer 2

Safari浏览器呈现不同的东西并使用下拉菜单的UI覆盖。你不能只是隐藏起来，但你可以移动它们。在这里我使用jQuery选择移入和移出隐藏商店：

$(document).ready(function() {
  $("#brand").on("change", function() {
    var selectbrand = $(this).val();
    $("#model option[data-for]").appendTo("#modelStore");
    $("#modelStore option[data-for='" + selectbrand + "']").appendTo("#model");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brand">
  <option data-for="default">Select your brand</option>
  <option data-for="1">1</option>
  <option data-for="2">2</option>
  <option data-for="3">3</option>
</select>

<select id="model">
  <option>Select your model</option>
</select>

<select id="modelStore" style="display:none;">
  <option data-for="1" value="1 Model 1">1 Model 1</option>
  <option data-for="1" value="1 Model 2">1 Model 2</option>
  <option data-for="2" value="2 Model 1">2 Model 1</option>
  <option data-for="2" value="2 Model 2">2 Model 2</option>
  <option data-for="3" value="3 Model 1">3 Model 1</option>
</select>