0

以下は、私が取り組んでいるプロジェクトの jQuery です。jsFiddle リンクも含まれています。

基本的に、if ステートメントまではすべてが美しく機能します。これまでのところ、誰かが金曜日または土曜日の日付を選択すると、選択ボックスから特定の時間が削除されるように設定しましたが、これで問題ありません。ただし、誰かが金曜日または土曜日から日を変更することを決定した場合、削除されたオプションが再び追加されることはありません。理由はわかっていますが、それらを元に戻す最良の方法は何ですか? 私はelseステートメントを実行できましたが、削除されたオプションを複製するだけだと思います

コード：

$(document).ready(function () {
    var selectedDay = "#selected_day";
    $(function () {
        $("#datepicker").datepicker({
            dateFormat: "DD, d M yy",
            altField: selectedDay,
            altFormat: "DD",
            onSelect:function(){
                $(selectedDay).change()
            }
        });
        $(selectedDay).change(function () {
            if($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday'){
                $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').remove();
            }
        });
    });
});

jsfiddle - http://jsfiddle.net/andyjh07/c3u5B/

4

4 に答える 4

2

hide()削除する代わりに、次のようにすることができます。

$(selectedDay).change(function () {
   var day = $(this).val();
   if($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday'){
        $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').hide();
   }
   else {
        $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').show();
   }
});

更新されたデモ フィドル

于 2013-04-04T10:49:58.980 に答える
1

を使用して無効にすることもできます.prop()。これは、一部の値が無効になっていて欠落していないため、ユーザーに表示されるように非表示にするよりも、おそらくユーザーフレンドリーです。

var value = false;
if ($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday') {
    value = true;
}

$('#times')
    .find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]')
    .prop('disabled', value);

デモ

購入前にお試しください

于 2013-04-04T10:57:25.750 に答える
0

これは正常に動作します... http://jsfiddle.net/andyjh07/c3u5B/

$(document).ready(function () {
     var times = $('#times').clone();
      alert(times.html());
    var selectedDay = "#selected_day";
    $(function () {
        $("#datepicker").datepicker({
            dateFormat: "DD, d M yy",
            altField: selectedDay,
            altFormat: "DD",
            onSelect:function(){
                $(selectedDay).change()
            }
        });
        $(selectedDay).change(function () {
            var day = $(this).val();

            if($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday'){
                $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').remove();
            }
            else{
            $("#times").html(times.html());
            }
        });
    });
});
于 2013-04-04T10:59:12.790 に答える
0

それらを DOM から削除するのではなく、単に and を使用hide()しshow()ます。

$(document).ready(function () {
    var selectedDay = "#selected_day";
    $(function () {
        $("#datepicker").datepicker({
            dateFormat: "DD, d M yy",
            altField: selectedDay,
            altFormat: "DD",
            onSelect:function(){
                $(selectedDay).change()
            }
        });
        $(selectedDay).change(function () {
            var day = $(this).val();
            if($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday') {
                $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').hide();
            }
            else
            {
                $('#times option:not(:visible)').show();
            }
        });
    });
});

これが更新されたjsFiddleです

于 2013-04-04T10:51:48.977 に答える