Question

我在Chrome和FF中使用此代码，但它在IE中无效。这是一个简单的形式，有2个下拉，第二个下拉过滤基于第一个。然后，选择将您带到提交的其他站点。在IE中，过滤的选项是灰色的而不是隐藏的。

<!DOCTYPE html>
<head>

  <html>
  <title>Dropdowns</title>
  <script src="./jquery-1.11.0.min.js"></script>
    <script>
        function filterList(countryList) {
            var selected = countryList.find(":selected").text();

            if (selected == "US") {
                showOption($("#city .US"));
                hideOption($("#city .UK, .IE"));
            }
            else if (selected == "UK") {
                showOption($("#city .UK"));
                hideOption($("#city .US, .IE"));
            }
            else {
                showOption($("#city .IE"));
                hideOption($("#city .UK, .US"));
            }
            $("#city").find("option:not(:disabled):first").prop('selected', true);
        }

        function hideOption(option) {
            option.attr("disabled", 'disabled');
            option.hide();
        }

        function showOption(option) {
            option.removeAttr('disabled');
            option.show();
        }

        $(document).ready(function () {
            var countryList = $("#country");
            filterList(countryList);

            $("#country").change(function () {
                filterList($(this));
            });
        });

  </script>
  <script>
  $(document).ready(function () {
    var countryList = $("#country");
    filterList(countryList);

    $("#country").change(function(){
      filterList($(this));
   });
  });
  </script>
</head>

<body>
  <div>
    <h1>Please select your home city</h1>

  </div>

  <form name="dropdown" id="dropdown">
    <div>
      <select class="country" id="country" name="country">
        <option value="United States">US</option>
        <option value="United Kingdom">UK</option> 
        <option value="Ireland">IE</option>
        </select>
    </div>

    <div>
      <select class="city" id="city" name="city">
      <!-- US options Below -->
      <option value="http://www.google.ie" class="US">Chicago</option>
      <option value="http://www.google.com" class="US">New York</option>
      <option value="http://www.stackoverflow.com" class="US">Miami</option>
      <!-- UK options Below -->
      <option value="http://www.linkedin.com" class="UK">London</option>
      <!-- Ireland options Below -->
      <option value="http://www.ebay.com" class="IE">Ireland</option>
      </select>
    </div>


  <div>
    <input type="checkbox" name="checkbox" value="checkbox" />Remember my
    selection<br />
  </div>

  <div>
    <input type="button" value="Set as My Home" onclick=
    "goToNewPage(document.dropdown.city)" />
  </div>

</form>
</body>
</html>

Answer 1

并非所有浏览器都支持隐藏选项元素，例如IE不支持以任何方式隐藏选项。

你看到的“灰色”就是当你禁用一个选项时会发生什么，你不仅要隐藏它们，还要禁用它们。作为旁注，此上下文中的disabled是属性，您应该使用

option.prop('disabled', true);

用于过滤选择内部选项的跨浏览器方式是删除和插入元素，而不是隐藏和显示它们。

过滤器下拉jquery无法在IE上运行，但在Chrome / FF上

1 个答案: