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

Unexpected JS behavior when clearing input field value - STCombobox

本文关键字：意外 JS 行为 输入 字段 -STCombobox 清除      更新时间：2024-03-10

我正在使用一些JQuery组合框，您可以在此处查看：https://simpletutorials.com/uploads/1860/demo/index.html

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

我更改了代码，并在列表的点击事件上添加了这个JS：

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

这一行基本上通过id查找输入，并将其值设置为空字符串。您可以通过查找类为"stc-button"的td元素（对于Chrome，只需关注第二个组合框的箭头）并将我的代码添加到标签中来进行尝试。

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

onclick="this.value=''"

===结束编辑===

这有一个奇怪的行为：

  1. 如果我从列表中选择一个元素，它会清除值，并且一切正常
  2. 如果我键入一些字母，然后从列表中选择一个值，则单击后列表中不会显示任何项目

它怎么了？

您可以覆盖其中一个组合框方法来实现这一点：

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

这有帮助吗？

提供了未经编译的代码，代码相对较小（12kb），注释也很好，因此如果您愿意，可以直接对源代码进行修改。

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

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

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

相关文章：