jquery输入文本更改显示/隐藏选择选项

Question

我有问题来显示/隐藏选择选项时，输入文本更改。 我已创建[这里]一个示例：http://jsfiddle.net/gr09tkwb/

下面是HTML：

<input type="text" name="f1" id="f1" /> 
<select name="f2" id="f2"> 
<option>Select</option> 
<option id="id1">id1</option> 
<option id="id2">id2</option> 
<option id="id3">id3</option> 
<option id="id4">id4</option> 
</select> 

这里是脚本：

$("#f1").on("change",function(){ 
var e=$("#f2").val(); 
var t=$("#f1").val(); 
var n=8.25; 
var r=2.5; 
var i=.5; 
var s=t>10; 
var u=t>n&&t<=10; 
var a=t>r&&t<=n; 
var f=t<=r&&t>i; 
if(s){ 
    $("#id2,#id3,#id4").remove().end(); 
    $('<option id="id1">id1</option>').appendTo(s) 
}else if(u){ 
    $("#id3,#id4").remove().end(); 
    $('<option id="id1">id1</option><option id="id2">id2</option>').appendTo(u) 
}else if(a){ 
    $("#id4").remove().end(); 
    $('<option id="id1">id1</option><option id="id2">id2</option><option id="id3">id3</option>').appendTo(a) 
}else if(f){ 
    $().remove().end(); 
    $('<option id="id1">id1</option><option id="id2">id2</option><option id="id3">id3</option><option id="id4">id4</option>').appendTo(f) 
} 
}); 

当我输入数字20，其是 's' 的（大于10），选择选项显示id1。好。

当我输入数字9，即'u'（大于8.25 & & < = 10）时，选择选项仍然显示id1。

但是，加载页面并输入数字9，它显示id1和id2，这是正确的。现在再次输入数字20，它只显示id1。它似乎工作得很好。

问题：

时输入一个数字，比我以前输入的，它的作品数量多;但如果输入的数字小于先前输入的数字，则不会改变。

请看看，谢谢。

Answer 1

有你的脚本，打碎东西的问题（虽然，它似乎工作）。

在这四年如果条件下，该行：

$("#id2,#id3,#id4").remove().end(); 

“作品” 为你打算。虽然end方法调用不需要，因为你没有继续链接。

所以，对于所有四个if条件，它总是正确删除在选择查询的options。

在此之后，你有一条线，看起来像这样：

if(s){ 
    ... 
    $('<option id="id1">id1</option>').appendTo(s) 
} 

这是不正确的。 appendTo期望的目标（选择器，jquery对象，等），以附加到HTML的字符串。你传递布尔真实appendTo，所以它实际上从未附加的变化。

基本上，它会永远删除 - 只是没有更新。

为了解决这个问题，我提出了以下变化：

if语句，我们只是删除所有option元素（除了第一个）

$('#f2').find('option:not(:eq(0))').remove(); 

后，我们查询select声明之前和追加HTML的字符串。

if(s){ 
    $('#f2').append('<option id="id1">id1</option>'); 
}else if(u){ 
    $('#f2').append('<option id="id1">id1</option><option id="id2">id2</option>'); 
}else if(a){ 
    $('#f2').append('<option id="id1">id1</option><option id="id2">id2</option><option id="id3">id3</option>'); 
}else if(f){ 
    $('#f2').append('<option id="id1">id1</option><option id="id2">id2</option><option id="id3">id3</option><option id="id4">id4</option>'); 
} 

这里有一个更新的小提琴：

http://jsfiddle.net/gr09tkwb/2/