javascript - 根据所选禁用选项

Question

小提琴

请帮我。我已经用谷歌搜索了这个，但我找不到确切的解决方案。

我有两个下拉菜单，一个用于选择“从日期”，另一个用于选择“至今”。例如：如果我从“从日期”下拉列表中选择 10，则应在“迄今为止”下拉列表中禁用“迄今为止”中小于 10 和 10 的选项。

注意：Fiddle 中的表格行不是静态的 2 行。可能3个或更多

这是我的代码

$(".tfdate").change(function() { 
var target   = $(this).parent().siblings().find("select.ttdate");
target.find("option").removeAttr("disabled");
var selected = $(this).val();
target.find("option").prevUntil("option[value='"+selected+"']").attr('disabled','disabled');
//target.find("option").prevAll("option[value='"+selected+"']").attr('disabled','disabled');
});

从日期

迄今为止

Answer 1

好吧，老实说，您应该真正使用 jQuery 日期选择器，否则您必须构建逻辑来计算所选数字是否是该月的有效日期（即选择 2 月 30 日的人），还要验证闰年等。

但是，要解决手头的问题，您需要找到与所选选项具有较低（或相等）值的任何选项，您可以通过filter以下方式使用：

var selected = parseInt($(this).val());
target.find("option").filter(function () {
    return parseInt($(this).val()) === selected 
        || parseInt($(this).val()) < selected;
}).attr('disabled','disabled');

看这里

Answer 2

我建议：

$(".tfdate").change(function() { 
   $(this).closest('tr')
          .find('.ttdate option')
          .prop('disabled', false)
          .filter('[value="'+ this.value +'"]')
          .prevAll()
          .addBack()
          .prop('disabled', true);
});

http://fiddle.jshell.net/C66rf/

Answer 3

我个人更喜欢使用 jquery 日期选择器，如果你想使用它，这里就是这样做的方法

演示

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            console.log(dt1);
            var dt2 = $('#dt2').datepicker('getDate');
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

更新：

演示

根据你所问的

$('#mybtn').click(function() {  
        var clone = $('.child:first').clone(true).appendTo('#child');
        clone.find('.myclass').datepicker();
});