使用jquery更改并显示[删除/添加]基于输入文本框的可用选项

Change and display[remove/add] the available option based on input textbox using jquery

本文关键字：输入 文本 选项 于输入 jquery 显示 添加 删除 使用      更新时间：2023-09-26
 <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();
 }
     }    
    }
});

嗨，如上面的代码所示，我能够删除所选的行，我的问题是，我不能添加所选的选项回来，如何添加所选的行回来ps:一旦输入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/

EDIT -合并soul所做的更改:

你可以将这些选项保存在一个变量中，然后再添加回去:

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/

一旦被删除，它就被删除了!

如果你只是想移动一行，你可以看看jQuery的before, after和append函数。

如果您想临时删除一行，稍后再插入，您应该使用detach。

如果你想隐藏它，以后再显示它，你应该使用隐藏和显示函数。

查看jQuery文档并查找这些函数，看看哪些适合。

下面是detach()的一个例子，当重新插入相同的元素时，它会保持所有其他数据的完整性:http://jsfiddle.net/PQ7GF/50/

相关文章：