0

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

  • 本月 1 - id&name attr ="userdobm"
  • 年度 1 - id&name attr="userdoby"
  • 1 (29) 天 - id&name attr ="userdobd29"
  • 1 (30) 天 - id&name attr ="userdobd30"
  • 1 (31) 天 - id&name attr ="userdobd31"

所有5 select标签都有唯一的 ID

默认情况下，(29)Days 和 (30)Days 设置为 on display:nonewithout requiredattr，(31)Days 设置为 on display:blockwith requiredattr。

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

(30)Days 和 (31)Days 将设置为display:none无requiredattr 并且 (29)Days 设置为 on display:blockwith requiredattr。

上述代码：

$("#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具有requiredattr 的当前 Days 标签的值？

4

4 回答 4

2

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

$('#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小提琴

于 2013-06-12T05:20:29.150 回答
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();
    }
});

这是它的实际操作

编辑：请注意，这不考虑闰年

编辑：另请注意，还有更有效的方法可以进行这种操作。Sparko 提到了一个使用 JS 原生 Date() 构造函数的好方法！

最后但并非最不重要的

jQuery 有另一个名为 ui 的项目。其中他们有一个特别有用的datepicker 小部件。我建议至少检查一下；）这不仅可以处理所有这些，还可以为用户提供一个很好的显示，让用户可以通过熟悉的界面点击日期。

于 2013-06-12T05:24:22.203 回答
1

选择器[attribute]将返回任何具有该属性的元素（无论是否指定了值）。所以类似的东西$('select[required]').val();应该返回像<select required> ... </select>. 这是属性选择器的 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>");
    }
});
于 2013-06-12T05:01:22.970 回答
0

演示：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();
});
于 2013-06-12T05:44:34.743 回答