Question

页面加载时，我希望所有下拉选项都隐藏。我使用display: none在CSS上进行了尝试。我尝试使用jQuery。但是，这些都不能在Safari中使用。该代码在Chrome中有效，但在Safari中不可用。

我尝试过：

jQuery(document).ready(function ($) {
  $(".product_names option").hide();
  });

jQuery("select").change(function() {
  $(".product_names option").hide();
});

<select class="product_names">
  <option>Select option</option>
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

和

jQuery(document).on('change', 'select', function () {
    $('.product_names option').hide();
    });

jQuery(document).on('change', 'select', function () {
    $('.product_names option').hide();
    });

<select class="product_names">
  <option>Select option</option>
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

和

jQuery(document).ready(function() {
      jQuery("select").change(function(){
           $("select option").hide();
      }); 
});

jQuery(document).ready(function() {
      jQuery("select").change(function(){
           $("select option").hide();
      }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="product_names">
  <option>Select option</option>
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

Answer 1

我可以确认Safari忽略了display: none元素上的option。

您最好的选择是禁用而不是隐藏选项：

$(".product_names").val("").find("option").prop("disabled", true);

如果您真的希望隐藏它们，则需要将其删除。如果以后需要，可以随时将它们放回原处：

var options = $(".product_names").find("option").detach();

添加回去：

options.appendTo(".product_names");

为什么隐藏/显示事件在野生动物园中不起作用

1 个答案: