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

而不是从 DOM 中删除它们，只需使用hide()and 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 回答
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 回答