我雇佣了一个人在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>
你可以访问这里的网站。
您的问题是,调整出发机场选择列表内容的Javascript使用jQuery(选项类).hide()来隐藏它们。这会将style="display: none;"
添加到选项中。
IE不支持选项上的display:none
。
我建议您搜索StackOverflow。如何处理这一问题的一个例子是如何在IE中使用JQuery隐藏和显示SELECT选项。
不是html造成了问题。问题在于css,我刚刚检查了你的代码,看起来有很多规则只是适用于chrome浏览器。在css中,任何以-webkit开头的东西都意味着它只适用于chrome和safari。除此之外,您还必须添加2个其他规则,1个用于-moz-mozilla,还有一个标准规则。你正在使用哪个版本的IE?它应该在IE10+上运行良好。我还看到您使用的是bootstrap框架,因此您也可以将这些功能替换为bootstrap中的默认功能,然后根据需要进行修改。