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 はattrdisplay:noneなしでオンに設定されrequired、(31)Days は attr でオンdisplay:blockに設定されrequiredます。

ユーザーが 2 月などの月を選択した場合

(30)Days と (31)Days は属性display:noneなしrequired、(29)Days は属性ありで設定されdisplay:blockますrequired。

上記のコード:

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

私の問題です。attrselectを持つ現在の Days タグの値を取得するにはどうすればよいですか?required

4

4 に答える 4

2

あなたの質問にすぐに答えるために、可視性の決定に最終的に依存するいくつかのアプローチがあります。これは、日ごとに選択した各項目にクラスを適用する場合に最も簡単に実行できます。$('select.userdobd:visible').val()または$('select.visible').val()、月の select の .change() メソッドで css を直接変更する代わりに、「visible」クラスを適用する場合

ただし、コメントで提案されているように、より効率的な方法は、1 つの選択を使用してオプションを非表示にすることです (特に 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 という別のプロジェクトがあります。特に便利な日付ピッカー ウィジェットがあります。少なくともチェックアウトすることをお勧めします ;) これは、これらすべてを処理するだけでなく、ユーザーが使い慣れたインターフェイスで日付をクリックするための優れた表示を可能にします。

于 2013-06-12T05:24:22.203 に答える
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 に答える
1

セレクター[attribute]は、その属性を持つすべての要素を返します (値が指定されているかどうかに関係なく)。したがって、のようなもの$('select[required]').val();は、のようなドロップダウンの値を返す必要があります<select required> ... </select>。属性セレクターの jQuery ドキュメントは次のとおりです。ご不明な点がございましたら、お気軽にお問い合わせください:)

より良いオプション

3つのdobd selectの代わりに、1つだけにして、その中のオプションの数を動的に変更します..以下の方法は、うるう年も調整します:)

$("#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 に答える