Dropdown filter doesn't work in IE

Question

I hired someone to build a page for me in Wordpress. It works fine in Google Chrome, but using Internet Explorer I seem to have problems with the filter he used on the dropdown list.

This is the code I have. So the first dropdown allows the user to select a country and the second dropdown allows the user to select an airport, with a filter on the selected country. Using Internet Explorer this doesn't work at all.

I can't find anything wrong in the code, but I'm definitely no professional.

global $wpdb;
$country_query = "SELECT a.AirportName, a.AirportCode, c.CountryName, c.CountryCode FROM booking_airport as a LEFT JOIN booking_country as c ON c.CountryCode = a.AirportCountryCode";
$country_info = $wpdb->get_results($country_query);
$countries = array();
foreach($country_info as $country_details) {
    if(!array_key_exists($country_details->CountryCode,$countries)) {
        $countries[$country_details->CountryCode] = $country_details->CountryName;
    }
    $depart_airports[] = "<option value=\"$country_details->AirportCode\" class=\"d_airport $country_details->CountryCode\">$country_details->AirportName</option>";
    $return_airports[] = "<option value=\"$country_details->AirportCode\" class=\"r_airport $country_details->CountryCode\">$country_details->AirportName</option>";
}

<select name="departure_country" id="departure_country" style="padding-left: 1%;">
<option value="0"><?php echo $select_country; ?></option>
<?php
foreach($countries as $k=>$v) {
    echo "<option value=\"$k\">$v</option>";
}
?>
</select>

<select name="departure_airport" id="departure_airport" style="padding-left: 1%;">
<option value="0"><?php echo $select_airport; ?></option>
<?php
foreach($depart_airports as $airport) {
    echo $airport;
}
?>
</select>

You can visit the website here.

There's likely a lot of related code that you're leaving out. Can you provide any more? — Patrick Q, Feb 18 '15 at 21:15
@Dagon, that's the problem. Once he received payments I never heard from him again ... — CustomX, Feb 18 '15 at 21:16
@PatrickQ, yeah sure! I'll see if I can find any related info — CustomX, Feb 18 '15 at 21:17

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

Your problem is that the Javascript that adjusts the contents of the departure airport select list is using jQuery(option class).hide() to hide them. This adds style="display: none;" to the option.

IE does not support display:none on options.

I suggest that you search StackOverflow. One example of how do handle this is How to Hide and Show SELECT Options with JQuery in IE.

edited May 23 '17 at 12:12

Community

1
1

answered Feb 18 '15 at 21:44

Bob, thank you very much! I'll check out that example tomorrow. Hopefully it works for me :) – CustomX Feb 18 '15 at 21:48

score 0 · Answer 2 · answered Feb 18 '15 at 21:39

0

Its not the html thats causing the problem. The issue lies in the css, i just inspected your code and it looks like there are many rules that are just applied for chrome browsers. in your css anything that starts with -webkit- means its just for chrome and safari. You will have to add 2 other rules besides this, 1 for -moz- mozilla and a standard one as well. Which version of IE are you using? it should work fine on IE10+. I also see that you are using bootstrap framework, so you can also replace these functionality with the default one from bootstrap and then modify it according to your needs.

answered Feb 18 '15 at 21:39

Omer Farooq

3,754
6
31
60

Wow really, just CSS? Damn ... I'm using IE 11. I'll try and fix that. – CustomX Feb 18 '15 at 21:43
@bobdye is right, it is a css error but using jquery to solve it might be better. One way would be to disable the options instead of hiding. .css("disabled","disabled"); Another way would be to use .hideOption(); and .showOption(); – Omer Farooq Feb 19 '15 at 08:16

Dropdown filter doesn't work in IE

2 Answers2