jQuery show()方法浏览器不显示问题排查求助

我做了省(il)-县(ilçe)-区(semt)三级选择器，当选择省份为“伊斯坦布尔”、县为“埃森尤尔特”时，jQuery代码里明明执行了「隐藏所有区选项→根据属性显示对应选项」的逻辑，但浏览器就是没呈现预期效果。

相关代码：

$(document).ready(function() {
  $("#ilce option").hide();
  // $("#semt option").hide();
  $("#il").change(function() {
    var il_id = $(this).val();
    $("#ilce option").hide();
    $("#ilce option[data-il='" + il_id + "']").show();
  });
  $("#ilce").change(function() {
    var ilce_id = $(this).val();
    $("#semt option").hide();
    $("#semt option[data-ilce='" + ilce_id + "']").show();
  });
});

问题根源 #

大部分浏览器不支持直接对<option>标签使用hide()和show()方法——display: none样式无法在这些浏览器中正确作用于option元素，导致你的隐藏/显示操作看似执行了，但实际没生效。

解决办法 #

换用更兼容的方式来控制选项的显示：

• 方案一：通过disabled属性+CSS控制
  先给页面加一段CSS：

  option:disabled {
    display: none;
  }
  

  然后把JS里的hide/show逻辑改成操作disabled属性：

  $("#ilce").change(function() {
    var ilce_id = $(this).val();
    // 先禁用所有区选项
    $("#semt option").prop('disabled', true);
    // 启用对应县的区选项
    $("#semt option[data-ilce='" + ilce_id + "']").prop('disabled', false);
  });
  

• 方案二：动态移除/添加选项
  先提前备份所有区选项，每次切换时清空选择器，再把对应选项加回去。这种方式需要注意备份原始选项，避免切换时丢失数据。

内容的提问来源于stack exchange，提问作者DCYılmaz