Javascript 禁用“选择”选项（如果已选择）

我已经创建了一个表，如果所有文本框都已填充并且上一行中的

select

发生了更改，则该表将克隆其最后一行。我试图添加一个条件，即如果在前几行中已经选择了新的下拉选项，则应禁用这些选项

禁用选项代码：

$('select').change(function() {

    var value = $(this).val();

    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });

});

完整JS:

$('#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="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>'
);
$('select').change(function() {

    var value = $(this).val();

    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });

});
    $('#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.data('done', false);
            }
        }
    });

    $('#buttonclck').on('click', function () {
        var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
        var lastRowInputs = lastRow.find('input');
        var isClone = false;
        lastRowInputs.each(function() {
           if($(this).val().length) {
               isClone = true;
           }
        });
        if(!isClone)
            return false;
        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);
    });

$（“#结果”）.append（'test test 2'
);
$（'select'）.change（函数（）{
var值=$（this.val（）；
$（this）.同级（'select'）。子级（'option'）。每个（函数（）{
if（$（this）.val（）==值）{
$（this.attr（'disabled'，true）.sides（）.removeAttr（'disabled'）；
}
});
});
$（'#results'）。关于（'focus'，'：input'，function（）{
$（this）.closest（'tr'）.filter（函数（）{
return！$（this.data（'saved'）；
})
.find（':input'）.each（函数（）{
$（this.data（'value'，this.value））；
$（this）.最近（'tr'）。数据（'saved'，true）；
});
})
.on（'input change'，'：input'，function（）{
$（this.data（'filled'，this.value！=$（this.data（'value'））
var tr=$（this.nexist（'tr'）；
all=tr.find（':input'），
fld=all.filter（函数（）{
返回$（此）.data（'filled'）；
});
如果（all.length==fld.length）{
如果（！tr.data（'done'））{
$（“#按钮”）[0]。单击（）；
tr.数据（“完成”，真实）；
}
}否则{
如果（tr.data（'done'））{
tr.数据（“完成”，错误）；
}
}
});
$（'#buttonck'）。在（'click'，函数（）{
var lastRow=$（'productanddates'）。最近（'productanddates'）。查找（“tr:last child”）；
var lastRowInputs=lastRow.find（'input'）；
var-isClone=false；
lastRowInputs.each（函数（）{
if（$（this.val（）.length）{
isClone=true；
}
});
如果（！isClone）
返回false；
var clone=lastRow.clone（）；
克隆.find（'input，select'）。每个（函数（）{
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））；
});
克隆.find（“输入[type='text']”）.val（“”）；
克隆。插入后（lastRow）；
});

HTML:

---

您的错误在这里：

$(this).siblings('select').children('option').each(function() { ... }

应该是：

$(this).children('option').each(function() { ... }   

为什么要选择

select

元素的

sides

？你应该直接进入它的选项。我不知道这是否是有意的，但这样的代码将使

选项

在上一行和新生成的两行中都被禁用

这是小提琴：

---

你的意思是，如果我从

select

中选择了“test 2”选项并填充了所有输入，新生成的行应该包含

select

而不包含

test 2

选项？@LazarevAlexandr是的，你更正了测试2应该是禁用的。我不确定你是否会更新你的小提琴，它显示的是相同的，这就是我得到的：在chrome、firefox和edge浏览器中测试。你能检查听到我哪里出了问题吗抱歉再次打扰你只在第一次选择时禁用第二次更改第三行它不应该显示第二行选择，但它显示在这里你去：，追加新行后，必须再次将

change

事件绑定到

select

元素。

$(this).children('option').each(function() { ... }