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/