Отключить опцию выбора, если она уже выбрана

Question

Я создал таблицу, которая клонирует свою последнюю строку, если все текстовые поля заполнены, а select изменен в предыдущей строке. Я пытаюсь добавить условие, что новые параметры раскрывающегося списка должны быть отключены, если они уже были выбраны в предыдущих строках.

Demo Fillde

отключить код опции:

$('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); 
    }); 

HTML:

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

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

Answer 1

Ваша ошибка была здесь:

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

Оно должно быть:

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

Почему вы выбираете siblingsselect из элемента? Вы должны непосредственно спуститься к своим опциям. Я не знаю, если он предназначен, но такой код сделает option отключенным в обеих строках: предыдущим и новым.

Вот скрипка:

http://jsfiddle.net/99pvwypp/19/