Question

输入文本更改时，我有问题显示/隐藏选择选项。我创建了一个示例[here]：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＆amp;＆amp;＆lt; = 10）时，选择选项仍显示id1。

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

问题：

当输入的数字大于我之前输入的数字时，它会起作用;但如果输入的数字小于之前输入的数字，则不会有任何变化。

请看一下，谢谢。

Answer 1

您的脚本存在一个问题，但它似乎有效（但是，它似乎有效）。

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

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

＆＃34;工作＆＃34;如你所愿。虽然不需要end方法调用，但由于您没有继续链接。

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

然后，您有一行如下所示：

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

这些是不正确的。 appendTo期望目标（选择器，jquery对象等）将HTML字符串附加到。您将布尔值true传递给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/

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

1 个答案: