Изменить и отобразить [удалить / добавить] доступную опцию, основанную на вводимом текстовом поле, используя jquery

Question

 <input id="studentnoofinst" type="text" size="20" value=""/>
<select id="studentinst" size="6">
<option value="1">First Installment</option>
<option value="2">Second Installment</option>
<option value="3">Third Installment</option>
<option value="4">Fourth Installment</option>
<option value="5">Fifth Installment</option>
<option value="6">Sixth Installment</option>
</select>

Jquery

 $("#studentnoofinst").keyup(function() { 

    //$("select option[value='fb']").prop("selected",true);
    alert("going to change");
    $leap=0;
    $leap=($('#studentnoofinst').val());
    if($leap!=''){
    for(i=$leap;i<=6;i++) {// displaying the no of installments 
        if(i!=$leap){
            $('#studentinst option[value='+i+']').remove();

 }
     }    
    }

});

Привет, как показано в коде выше, я могу удалить выбранную строку. Мой вопрос заключается в том, что я не могу добавить выбранную опцию обратно. Как добавить выбранную строку обратно? P.S: один раз, если ввести 4, последние 2 строки удаляются, а позже, если ввести 5, отображаются только первые 4 строки, а 5 строка рвется .. но это нужно

если в первый раз ввод = 4

ouptut:

  <option value="1">First Installment</option>
  <option value="2">Second Installment</option>
  <option value="3">Third Installment</option>
  <option value="4">Fourth Installment</option>

если во второй раз ввод = 5

ouptut:

  <option value="1">First Installment</option>
  <option value="2">Second Installment</option>
  <option value="3">Third Installment</option>
  <option value="4">Fourth Installment</option>
  <option value="5">Fifth Installment</option>//vomitted but i need this? add

Живой пример здесь: http://jsfiddle.net/PQ7GF/30/

Answer 1

РЕДАКТИРОВАТЬ - объединить изменения, сделанные душой:

Вы можете сохранить параметры в переменной и добавить их обратно:

var list = $('#studentinst').html();
$("#studentnoofinst").keyup(function() {
    $('#studentinst').empty().append(list);
    alert("going to change");
    $leap = 0;
    $leap = ($('#studentnoofinst').val());
    if ($leap != '') {
        for (i = $leap; i <= 6; i++) { // displaying the no of installments 
            if (i != $leap) {
                $('#studentinst option[value=' + i + ']').remove();
            }
        }
    }
});

скрипка здесь: http://jsfiddle.net/PQ7GF/49/

Answer 2

Как только он удален, он удален!

Если вы просто собираетесь переместить строку, вы можете посмотреть функции jQuery до, после и добавить.

Если вы хотите временно удалить строку и вставить ее позже, вы должны использовать detach.

Если вы хотите скрыть это и показать его позже, вам следует использовать функции скрытия и показа.

Перейдите к документации jQuery и посмотрите, какие функции подходят.

Вот скрипта с detach (), которая сохраняет все остальные данные без изменений при повторной вставке того же элемента: http://jsfiddle.net/PQ7GF/50/