javascript - 使用 jQuery 删除值后刷新/重新加载下拉列表？

Question

以下代码根据文本框中输入的文本删除下拉列表值。

FIDDLE DEMO

JQUERY

var ddl = ('#ddl'),
  txt = ('#txt');

$(txt).change(function() {   
  var x = $(txt).val(),
    li = $(ddl).html();

  if (x.length != 0) {
    $(ddl).html(li);
    $(ddl + ' :not([value="' + x + '"])').remove();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" placeholder="Enter a number...">

<select id="ddl">
  <option value="0" selected="selected">Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

问题

当文本框中输入新值时，如何将下拉列表值恢复到初始状态？

我一直在尝试使用:

$(ddl).selectmenu("refresh"); 

但这会阻止脚本按预期工作。

Answer 1

像这样

    ...
    $(ddl).html(li);
    $(ddl + ' :not([value="' + x + '"])').hide();
} else {
    $(ddl + ' :not([value="' + x + '"])').show();
}
...

您只需隐藏该项目即可，而不是完全删除该项目。当您清空输入字段时，重新显示所有项目。