[英]jQuery .hide() doesn't work in some browsers
We are using jQuery .hide() to hide options in select inputs - when there are less than 31 days in a month. 我们使用jQuery .hide()隐藏选择输入中的选项 - 一个月内少于31天。 It works fine with Google Chrome and FireFox, but it doesn't work in Internet Explorer, Opera and Safari. 它适用于谷歌Chrome和FireFox,但它在Internet Explorer,Opera和Safari中不起作用。 Here is the JavaScript code we are using: 这是我们使用的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. 谢谢,乌里。
it's a browser issue you can't hide options in some browser because $('.selector').hide();
这是一个浏览器问题,你不能在某些浏览器中隐藏选项,因为$('.selector').hide();
is similar to $('.selector').css('display', 'none');
类似于$('.selector').css('display', 'none');
some browser can't hide it 有些浏览器无法隐藏它
you need to use $('.selector').remove();
你需要使用$('.selector').remove();
and $('.selector').append();
和$('.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浏览器和Firefox中测试过
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). 感谢您的回答,我使用了您的代码,但我稍微更改了一些处理28和29天(2月)的月份。 Here is the function again: 这是功能:
// 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. 我向jQuery添加了一个名为$ .parse_int的插件 - 如果未指定,则返回带有基数10的parseInt。 Here is the code of the plugin: 这是插件的代码:
// 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. URI。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.