Question

我试图在html行中禁用克隆选择的select选项，首先更改它会禁用在第二行上选择的选项，在第二行上选择的选项应该在第三行禁用但是它不是禁用。克隆在填写文本框的所有值并下拉更改后发生。

禁用选项代码：

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

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

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

Full 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><option value="test3">test 3</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);
    });

HTML：

<div id="results"></div>

<input id="buttonclck" type="button" class="hide"  value="button"/>

Answer 1

填充两个数组：

var optionsAvilable = {1,2,3,4,5,6,7,8,9};//filled once (hardcoded or when you get the data list)
var optionsUsed = {2,5};//dynamically updated

select.onchange ---＆gt;从＆＃39; optionsUsed＆＃39;中删除已选择的值（如果已选择）并将新选择的值添加到＆＃39; optionsUsed＆＃39;。

当附加数据时，只需循环遍历“选项”即可获得＆＃39;并添加optionsUsed中不包含的任何选项，因此您隐藏了不可用的值（或添加在＆＃39; optionsUsed＆＃39;数组中找到的项目，其中属性已禁用

<option value="test2" disabled="disabled">test 2</option>

注意：对于任何一种方法删除选项，或禁用它们...在任何select.onchange（...）之后，你应该遍历所有＆＃34;选择＆＃34;元素并将所有元素更新为仅包含可用选项

**编辑：看看这个fiddle它有一些错误，但它正在禁用当前选择的选项（注意：你只能通过按下按钮添加新行）

在克隆上禁用html选项（如果在先前的选择中选择）

1 个答案: