javascript jQuery .hide() 在某些浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13930585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .hide() doesn't work in some browsers
提问by Uri
We are using jQuery .hide() to hide options in select inputs - when there are less than 31 days in a month. It works fine with Google Chrome and FireFox, but it doesn't work in Internet Explorer, Opera and Safari. Here is the JavaScript code we are using:
我们正在使用 jQuery .hide() 来隐藏选择输入中的选项 - 当一个月少于 31 天时。它适用于 Google Chrome 和 FireFox，但不适用于 Internet Explorer、Opera 和 Safari。这是我们正在使用的 JavaScript 代码：
$(function() {
// Show and hide days according to the selected year and month.
function show_and_hide_days(fp_form) {
var select_year= $(fp_form).find("select.value_year");
var select_month= $(fp_form).find("select.value_month");
var select_day= $(fp_form).find("select.value_day");
var selected_year= parseInt($(select_year).val());
var selected_month= parseInt($(select_month).val());
var selected_day= parseInt($(select_day).val());
var days_in_month= new Date(selected_year, selected_month, 0).getDate();
if ((days_in_month >= 28))
{
// If selected day is bigger than the number of days in the selected month, reduce it to the maximal day in this month.
if (selected_day > days_in_month)
{
$(select_day).val(days_in_month);
}
// Show all the days in this month and hide days which are not in this month.
$(select_day).find("option").each(function() {
var day= parseInt($(this).val());
if (day <= days_in_month)
{
$(this).show();
}
else
{
$(this).hide();
}
});
}
}
// Show and hide all days in this page.
function show_and_hide_all_days() {
$("select.value_day").each(function() {
var form= $(this).closest("form");
// Show and hide days according to the selected year and month.
show_and_hide_days(form);
});
}
// Show and hide all days in this page.
show_and_hide_all_days();
$("select.value_year, select.value_month").live("change", function() {
var form= $(this).closest("form");
// Show and hide days according to the selected year and month.
show_and_hide_days(form);
return false;
});
});
Here is the HTML code:
这是 HTML 代码：
<select class="value_year">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012" selected="selected">2012</option>
<option value="2013">2013</option>
</select>
/
<select class="value_month">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="selected">12</option>
</select>
/
<select class="value_day">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18" selected="selected">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
We are using jQuery v1.8.3 (I upgraded to this version to test if it fixes the problem, but it doesn't).
我们使用的是 jQuery v1.8.3（我升级到这个版本来测试它是否解决了问题，但它没有）。
Thanks, Uri.
谢谢，乌里。
采纳答案by Uri
Thank you for your answer, I used your code but I changed it a little bit to handle months with 28 and 29 days (February). Here is the function again:
感谢您的回答，我使用了您的代码，但我对其进行了一些更改以处理 28 天和 29 天（2 月）的月份。这里又是这个函数：
// Show and hide days according to the selected year and month.
function show_and_hide_days(fp_form) {
var select_year= $(fp_form).find("select.value_year");
var select_month= $(fp_form).find("select.value_month");
var select_day= $(fp_form).find("select.value_day");
var selected_year= $.parse_int($(select_year).val());
var selected_month= $.parse_int($(select_month).val());
var selected_day= $.parse_int($(select_day).val());
var days_in_month= new Date(selected_year, selected_month, 0).getDate();
// If the number of days in the selected month is less than 28, change it to 31.
if (!(days_in_month >= 28))
{
days_in_month= 31;
}
// If the selected day is bigger than the number of days in the selected month, reduce it to the last day in this month.
if (selected_day > days_in_month)
{
selected_day= days_in_month;
}
// Remove days 29 to 31, then append days 29 to days_in_month.
for (var day= 31; day >= 29; day--)
{
$(select_day).find("option[value='" + day + "']").remove();
}
for (var day= 29; day <= days_in_month; day++)
{
$(select_day).append("<option value=\"" + day + "\">" + day + "</option>");
}
// Restore the selected day.
$(select_day).val(selected_day);
}
It now works with all the five browsers I tested (I didn't test with previous versions of Internet Explorer).
它现在适用于我测试的所有五种浏览器（我没有用以前版本的 Internet Explorer 进行测试）。
I added a plugin to jQuery called $.parse_int - this returns parseInt with radix 10 if not specified. Here is the code of the plugin:
我向 jQuery 添加了一个名为 $.parse_int 的插件 - 如果未指定，则返回基数为 10 的 parseInt。这是插件的代码：
// Add functions to the jQuery object.
(function( $ ) {
// Return parseInt with radix 10 if not specified.
$.parse_int= function(fp_string, fp_radix) {
var radix= ((typeof(fp_radix) !== "undefined") ? fp_radix : 10);
return parseInt(fp_string, radix);
};
})( jQuery );
Uri.
乌里。
回答by Nerdroid
it's a browser issue you can't hide options in some browser because $('.selector').hide();is similar to $('.selector').css('display', 'none');some browser can't hide it
这是浏览器问题，您无法在某些浏览器中隐藏选项，因为$('.selector').hide();类似于$('.selector').css('display', 'none');某些浏览器无法隐藏它
you need to use $('.selector').remove();and $('.selector').append();
你需要使用$('.selector').remove();和$('.selector').append();
change the codes from
更改代码
if ((days_in_month >= 28))
{
// If selected day is bigger than the number of days in the selected month, reduce it to the maximal day in this month.
if (selected_day > days_in_month)
{
$(select_day).val(days_in_month);
}
// Show all the days in this month and hide days which are not in this month.
$(select_day).find("option").each(function() {
var day= parseInt($(this).val());
if (day <= days_in_month)
{
$(this).show();
}
else
{
$(this).hide();
}
});
}
to
到
// Remove days 29 - 31
$(select_day).find("option[value='29'], option[value='30'], option[value='31']").remove();
var daysOptions = "";
if (days_in_month >= 29) {
daysOptions += '<option value="29">29</option>';
}
if (days_in_month >= 30) {
daysOptions += '<option value="30">30</option>';
}
if (days_in_month == 31) {
daysOptions += '<option value="31">31</option>';
}
$(select_day).append(daysOptions);
http://jsfiddle.net/sL4jY/10/tested in IE chrome and Firefox
http://jsfiddle.net/sL4jY/10/在 IE chrome 和 Firefox 中测试
