具有所需属性的 jQuery 目标输入标记答案

【问题标题】：jQuery target input tag with required attr具有所需属性的 jQuery 目标输入标记
【发布时间】：2013-06-12 04:48:22
【问题描述】：

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

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 设置为 display:none，不带 required attr，(31)Days 设置为 display:block，带 required attr。

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

(30)Days 和 (31)Days 将设置为 display:none，不带 required attr，(29)Days 设置为 display:block，带 required attr。

以上代码：

$("#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');
    }
});

我的问题是。如何获取具有required attr 的当前 Days select 标签的值？

【问题讨论】：

一个代码示例会很有帮助
提供html dom，所以我们可以给你选择器...否则我们只是在编写随机代码。
一天只有一个选择，并根据月份隐藏必要的日期选项不是更容易吗？考虑到您执行此操作的方式，您可能还需要在 2 月有 28 天时进行另一个选择。
@winterblood 是的，我刚决定在 2 月 29 日设置。
@abc123 我添加了选择标签的 id&name attr。可以用吗？

标签： jquery jquery-selectors

【解决方案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

【讨论】：

+1 关于原生 JS Date() 方法的简单性和使用 :) 您可以改进的一件事是重写为 $('#Day').append($('<option>', { value: i, text: i }));

【解决方案2】：

要立即回答您的问题，您可以采取几种方法，最终取决于确定可见性。如果您在一天内为每个选择应用一个类，这很容易完成。 $('select.userdobd:visible').val() 或 $('select.visible').val() 如果您应用类“可见”而不是直接在月份选择的 .change() 方法中修改 css

不过，正如 cmets 中所建议的那样，一种更有效的方法是只使用 one select 并隐藏选项（特别是如果您将 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。我建议至少检查一下；）这不仅可以处理所有这些问题，而且还可以为用户提供一个很好的显示，让用户可以通过熟悉的界面点击日期。

【讨论】：

虽然，我在一个 jsfiddle 上运行它，你是否还有三个选择，或者你是否将它们合并为一个包含 31 个选项？
由于大众需求，我正在使用单个动态选择标签更改代码。
@joespina 很高兴您找到了更好的解决方案之一。作为参考，我的代码有两个问题，一个是#userdob 而不是#userdobd，另一个是它正在寻找 val 标记而不是 value（穿过我的 jquery 和 html，它一定迟到了）。更新我的答案
啊，我在测试您的代码时没有注意到这一点。很好+1！

【解决方案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>");
    }
});

【讨论】：

没关系，但问题是我在整个表单中有大约 5 个不同的选择标签，它们有 required attr。即使是月份和年份select 标签也有required attr。如果我使用$('select[required]').val() 我认为它会针对所有人？不过不确定。会吗？因为我只需要在此问题中定位 (3) 天 Select 标记中的 1 天。
老实说，为同一目的使用三个不同的选择并不是最好的方法。检查我更新的“更好的选项”以获得一个简单的解决方案，该解决方案将更新单个“userdobd”选择的天数，它允许您正常选择它，它是 id，例如$('#userdobd').val().. 让我知道这是否有意义或者您有任何问题:)
是的，我收到了一些关于这个想法的反馈，哈哈，我正在根据建议调整我的代码。谈论同伴压力哈哈 :)) 会尝试你的代码。
好的，刚试过。它的代码更少并且可以完成工作。谢谢！
这很慢，因为你附加 IE7 会很糟糕......你应该创建一个变量，然后用你的 html 填充它，然后一次写入 DOM。

【解决方案4】：

演示：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();
});

【讨论】：