CODEWITHSUNDEEP
javascriptjqueryhtml
user3460117
user3460117

Reputation: 21

Filter drop down jquery is not working on IE but is on Chrome/FF

I have this code working in Chrome and FF, but it is not working in IE. It is a simple form with 2 drop downs, with the second drop down filtering based on the first. The selection then brings you to a different site on Submit. In IE, the filtered options are greyed out rather than hidden.

<!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>

Upvotes: 2

Views: 755

Answers (1)

adeneo
adeneo

Reputation: 318302

Not all browsers support hiding option elements, IE for instance does not support hiding an option in any way.

The "greyed out" you're seeing is what happens when you disable an option, and you're not only hiding them, but disabling them as well. As a sidenote, disabled in this context is a property, and you should be using 

option.prop('disabled', true);

The cross browser way to filter options inside a select is to remove and insert the elements, not hide and show them.

Upvotes: 1

Related Questions