On Select change Disable option if selected previois and create a clone row not working

Question

如果在前一行被选中，我试图禁用选择选项说如果最后一行文本框的值被填充并且选择被更改，我的 html 表会创建一行我试图做的是如果选择选项在创建新行之前被选中，当我添加禁用代码时应该禁用选择选项，然后不会创建新行。

Demo Fiddle with select code

Demo Fiddle with out select code

$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test1">test1 </option><option value="test2">test 2</option></select></td> <td>   <input type="text" name="renewal_by1" id="renewal_by1" />  </td>   <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>');

//*******the select code if this is removed all works fine******?//
setTimeout(function () {
    var $selects = $('select');
    $selects.on('change', function () {


        $("option", $selects).prop("disabled", false);
        $selects.each(function () {
            var $select = $(this),
                $options = $selects.not($select).find('option'),
                selectedText = $select.children('option:selected').text();
            $options.each(function () {
                if ($(this).text() == selectedText) $(this).prop("disabled", true);
            });
        });
    });

    $selects.eq(0).trigger('change');

}, 99);



$('#results').on('focus', ':input', function () {
    $(this).closest('tr').filter(function () {
        return !$(this).data('saved');
    })
        .find(':input').each(function () {
        $(this).data('value', this.value);
        $(this).closest('tr').data('saved', true);
    });
})
    .on('input change', ':input', function () {
    $(this).data('filled', this.value != $(this).data('value'))
    var tr = $(this).closest('tr');
    all = tr.find(':input'),
    fld = all.filter(function () {
        return $(this).data('filled');
    });
    if (all.length == fld.length) {
        if (!tr.data('done')) {
            $('#buttonclck')[0].click();
            tr.data('done', true);
        }
    } else {
        if (tr.data('done')) {
            tr.next('tr').remove();
            tr.data('done', false);
        }
    }
});

$('#buttonclck').on('click', function () {
    var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");

    var cloned = lastRow.clone();
    cloned.find('input, select').each(function () {
        var id = $(this).attr('id');

        var regIdMatch = /^(.+)(\d+)$/;
        var aIdParts = id.match(regIdMatch);
        var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);

        $(this).attr('id', newId);
        $(this).attr('name', newId);
    });

    cloned.find("input[type='text']").val('');
    cloned.insertAfter(lastRow);
});


$('#results').on('change', '.dd', function (e) {
    var data = "dummy data";
    $(this).closest('td').prev().find('input').val(data).trigger('input');
    $(this).closest('td').next().find('input').val(data).trigger('input');
});

Answer 1

以下代码在添加新行后执行，应遍历先前的行并禁用 select 的新行值已使用：

    var prevRows = cloned.siblings();
    cloned.find('select option').each(function(index,option) {
        prevRows.each(function(i,tr) {
            option.value !== $('select', tr).val() || $(option).prop('disabled',  true);
        });
    }); 

演示

• DEMO 1
• DEMO 2
• DEMO 3