Question

我的表单中有一个简单的日期部分。我有5 select个标签：

1表示月份 - id＆amp; name attr =“userdobm”
1 - id＆amp; name attr =“userdoby”
1 for（29）Days - id＆amp; name attr =“userdobd29”
1 for（30）Days - id＆amp; name attr =“userdobd30”
1 for（31）Days - id＆amp; name attr =“userdobd31”

所有5 select代码都有唯一ID

默认情况下（29）天数和（30）天设置在display:none没有required attr的情况下，（31）天数设置在display:block上required attr。

当用户选择月份时，例如二月

（30）天和（31）天将设置为display:none没有required attr和（29）天设置在display:block上required attr。< / p>

以上代码：

$("#userdobm").change(function() {
    var userdobmval = $("#userdobm").val();
    if(userdobmval == 4 || userdobmval == 6 || userdobmval == 9 || userdobmval == 11) {
        $("#userdobd30").css('display','block').val('').prop('required', true);
        $("#userdobd29,#userdobd31").css('display','none').val('').removeAttr('required');
    } else if (userdobmval == 2) {
        $("#userdobd29").css('display','block').val('').prop('required', true);
        $("#userdobd30,#userdobd31").css('display','none').val('').removeAttr('required');
    } else {
        $("#userdobd31").css('display','block').val('').prop('required', true);
        $("#userdobd29,#userdobd30").css('display','none').val('').removeAttr('required');
    }
});

我的问题是。如何获取具有select attr的当前天required代码的值？

Answer 1

更好的方法是根据用户当前选择的年份和月份有条件地加载天数，这也可以消除多天所需的多个必需属性的问题（并且应该处理闰年）。

$('#Month').change(function(){
    updateDays();
});

$('#Year').change(function(){
    updateDays();
});

function updateDays(){
    var year = $('#Year').val();
    var daysInMonth = daysInMonth($('#Month').val(), year);

    for(var i=0;i<=daysInMonth;i++){
        $('#Day').append($("<option></option>")
         .attr("value",i)
         .text(i)); 
    }

    function daysInMonth(month,year) 
    {
       return new Date(year, month, 0).getDate();
    }
}

updateDays();

JS Fiddle

Answer 2

要立即回答您的问题，您可以采取一些方法，最终取决于确定可见度。如果您将一个类应用于每天的每个选择，则最容易实现。 $('select.userdobd:visible').val()或$('select.visible').val()如果您应用“可见”类而不是直接在您的月份选择.change（）方法中修改css

虽然，正如评论中所建议的那样，更有效的方法是使用一个选择并隐藏选项（特别是如果你将POST数据发送到服务器端脚本，如php ）

$("#userdobm").change(function() {
    var userdobmval = $("#userdobm").val();
    if(userdobmval == 4 || userdobmval == 6 || userdobmval == 9 || userdobmval == 11) {
        $("#userdobd").val('').find('option[value="30"]').show();
        $("#userdobd").val('').find('option[value="31"]').hide();
    } else if (userdobmval == 2) {
        $("#userdobd").val('').find('option[value="30"], option[value="31"]').hide();
    } else {
        $("#userdobd").val('').find('option[value="30"], option[value="31"]').show();
    }
});

这是行动中的fiddle

编辑：请注意，闰年不帐户

编辑：还要注意，还有更有效的方法来执行此类操作。 Sparko提到了一个使用JS的原生Date（）构造函数的好方法！

最后但并非最不重要

jQuery有另一个名为ui的项目。在他们有一个特别有用的datepicker widget。我建议至少检查出来;）这不仅会处理所有这些，而且还允许用户点击具有熟悉界面的日期。

Answer 3

选择器[attribute]将返回具有该属性的任何元素（无论是否指定了值）。因此$('select[required]').val();之类的内容应返回类似<select required> ... </select>的下拉列表的值。 Here's属性选择器的jQuery文档。如果您有任何问题，请告诉我们。）

更好的选择

而不是3个dobd选择，只需要一个，并动态更改其中的选项数。下面的方法也会调整闰年：）

$("#userdobm, #userdoby").change(function() {
    var max = new Date($('#userdoby').val(), $('#userdobm').val(), 0).getDate();
    $('#userdobd').empty();
    for (var i=1; i<=max; i++)
    {
        $('#userdobd').append("<option>"+i+"</option>");
    }
});

Answer 4

DEMO：http://jsfiddle.net/abc123/ksJ8t/4/

这就是你想要的。

JS：

$('#userdobd').prop('disabled', true);

function SetDays() {
    if ($('#userdobm').val() !== undefined && $('#userdoby').val() !== undefined) {
        $('#userdobd').prop('disabled', false);
        var d = new Date($('#userdoby').val(), $('#userdobm').val(), 0);
        console.log(d.getDate() + "Year " + d.getFullYear() + " Month " + d.getMonth());
        var options = '';
        for (var i = 1; i <= d.getDate(); i++) {
            options = options + "<option value='" + i + "'>" + i + "</option>";
        }
        $('#userdobd').html(options);
    }
}

$("#userdobm, #userdoby").focus(function(){
  SetDays();
}).change(function() {
    SetDays();
});

带有必需attr的jQuery目标输入标记

4 个答案:

最后但并非最不重要

更好的选择