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

当输入文本更改时，我无法显示/隐藏选择选项。 我[在此]创建了一个示例：

以下是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>

挑选
id1
id2
id3
id4

以下是脚本：

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

$（“#f1”）。关于（“更改”，函数（）{
变量e=$（“#f2”）.val（）；
var t=$（“#f1”）.val（）；
var n=8.25；
var r=2.5；
var i=0.5；
var s=t>10；
var u=t>n&&tr&&t您的脚本有一个问题，它破坏了一些东西（尽管它似乎可以工作）

在您的四个if条件中，这一行：

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

“工作”如您所愿。尽管不需要
end
方法调用，因为您没有继续链接

因此，对于所有四个if条件，它将始终正确删除选择器中查询的
选项

接下来，您将看到一行如下所示：

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

之后，我们查询
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>');
}

if（s）{
$（'#f2'）。追加（'id1'）；
}否则，如果（u）{
$（'#f2'）。追加（'id1id2'）；
}若否(a){
$（'#f2'）。追加（'id1id2id3'）；
}若否(f){
$（'#f2'）。追加（'id1id2id3id4'）；
}

这是最新的提琴：

你能公布程序的用途吗？嗨，这是一个基于权重输入的方框选择器。我们需要更多的细节，用例是什么？要处理的场景？没问题@John。我实际上做了一个小改动——过滤掉第一个选项。
find（'option:not（：eq（0）））
答案被更新以反映它。
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>');
}