Question

我正在使用一些JQuery Combobox，你可以在这里查看：https://simpletutorials.com/uploads/1860/demo/index.html

如您所见，您可以开始输入并过滤结果。但是，一旦选择了值，单击箭头打开列表时，不再显示其他值。所以，如果我想改变大学/州，我需要手动清除输入值。我不喜欢这个，所以我想修改它。

我更改了该代码，并在列表的click事件中添加了这个JS：

onclick="document.getElementById('statesCombo-ddi').value='';"

此行基本上按id查找输入，并将其值设置为空字符串。您可以通过查找具有“stc-button”类的td元素（使用Chrome，只关注第二个组合框的箭头）并将我的代码添加到标记中来尝试。

=== EDIT === 您可以通过将此代码直接添加到输入中来获得相同的结果：

onclick="this.value=''"

=== END EDIT ===

这有一种奇怪的行为：

如果我从列表中选择一个元素，它会清除该值，一切正常。
如果我输入一些字母，然后从列表中选择一个值，则点击后列表中不会显示任何项目。

它出了什么问题？

Answer 1

通过阅读源代码并使用Chrome的检查器（Control+Shift+i）进行一些调试，您可以找到需要清除的元素的特定ID（#collegesCombo-ddi），以便清除输入框。一旦找到元素的ID就需要清除（并且非常小心插入多个具有相同ID的元素的插件，这在标准中是不允许的，并且是一个编写得不好的代码的指示器）：

$('#collegesCombo-ddi').val('');

Answer 2

您可以覆盖其中一个组合框方法来完成此操作：

STComboBox.prototype.filterAndResetSelected = function() {
    this.$('ddi').val('');
    this.filterList('');
    this.selectRow(0);
    this.$('ddl').scrollTop(0);
};

这有帮助吗？

提供了未经提交的代码，相对较小（12kb）且评论相当充分，因此如果您愿意，可以直接对源进行修改。

编辑：修复以清除输入值（如下面的注释所示）

清除输入字段值时出现意外的JS行为 - STCombobox

2 个答案: