Question

我雇了一个人在Wordpress中为我建一个页面。它在谷歌浏览器中运行良好，但使用Internet Explorer我似乎在下拉列表中使用的过滤器有问题。

这是我的代码。因此，第一个下拉列表允许用户选择一个国家/地区，第二个下拉列表允许用户选择机场，并在所选国家/地区使用过滤器。使用Internet Explorer这根本不起作用。

我在代码中找不到任何错误，但我绝对不专业。

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>

您可以访问网站here。

Answer 1

您的问题是调整离境机场选择列表内容的Javascript使用jQuery（选项类）.hide（）来隐藏它们。这会为选项添加style="display: none;"。

IE不支持display:none选项。

我建议您搜索StackOverflow。如何处理这个问题的一个例子是How to Hide and Show SELECT Options with JQuery in IE。

Answer 2

它不是引起问题的html。问题在于css，我只是检查了你的代码，看起来有很多规则只适用于chrome浏览器。在你的CSS中，任何以-webkit开头的东西都意味着它只适用于chrome和safari。除此之外，您还必须添加2个其他规则，1个用于-moz- mozilla，还有一个标准规则。您使用的是哪个版本的IE？它应该在IE10 +上正常工作。我也看到你正在使用bootstrap框架，所以你也可以用bootstrap中的默认功能替换这些功能，然后根据你的需要进行修改。

下拉过滤器在IE中不起作用

2 个答案: