Question

下面是我正在处理的项目的jQuery，我还包含了一个jsFiddle链接。

基本上，一切都很美妙，直到我的if语句。到目前为止，我已经设置了如果有人选择星期五或星期六日期，它会从选择框中删除某些时间，这很好。然而，如果某人决定从星期五或星期六改变这一天，那么删除的选项将不会被重新添加，我知道为什么，但是将它们放回去的最佳方式是什么？我可以做其他声明，但我认为它只是复制已删除的选项

代码：

$(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/

Answer 1

而不是删除，您可以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();
   }
});

更新了Demo fiddle

Answer 2

您也可以使用.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);

<强>样本

Try before buy

Answer 3

不要将其从DOM中移除，只需使用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();
            }
        });
    });
});

这是updated jsFiddle

Answer 4

这很好用...... 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());
            }
        });
    });
});

jQuery中的小问题if语句和.remove（）

4 个答案: