Html在jsp中的jquery即时过滤器后单击时选择不更改选项

Html select not changes option on click after jquery instant filter in jsp

本文关键字：选择 单击 选项 过滤器 jsp 中的 jquery Html      更新时间：2023-09-26

我在一个页面上有3个select标记，由struts2 select标记生成。我使用的是一个jQuery过滤函数，它过滤select。每个选择都有一个文本字段，但它们都使用相同的筛选功能。我有另一个在onChange事件上调用的js函数。

问题是，在添加这个jQuery函数之前，我用表单提交和重新加载页面来过滤列表，现在过滤会立即发生，但当我写一个过滤标准时，选择不知何故失去了焦点，当我点击一个元素时，没有选择，或者更好地说是一种选择：元素用虚线圈出，未使用蓝色填充的正方形进行选择。js被调用，表单被提交，但使用旧值。然而，如果我第一次点击选择没有元素的地方（空白区域），然后选择一个元素，一切都好。我如何跳过第一次点击？

现在我的代码：

I。jQuery过滤器函数以及到select和text字段的绑定。

jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().scrollTop(0).data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,'gi');
            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append($('<option>').text(option.text).val(option.value));
                }
            });
        });
    });
};
$(function() {
    $('#selectedClientId').filterByText($('#filterClient'));
    $('#selectedLocationId').filterByText($('#filterLocation'));
    $('#selectedViewPointId').filterByText($('#filterViewpoint'));
});

II。选择之一：

<s:select size="10" cssStyle="width:220px;"
        label="Select a client"
        listKey="id" listValue="name"
        list="clientSelectList"
        name="selectedClientId" id="selectedClientId"
        headerKey="-1" headerValue="Client List"
        onchange="onChangeSelect()"
 />

III。选择的文本字段：

Filter:<s:textfield name="filterClient" id="filterClient" size="15" autocomplete="off"/>

IV。onChangeSelect（）：

function onChangeSelect() {
    document.getElementById('deviceListForm').action = '<s:url value="/admin/displayDeviceListPage.action"/>';
    document.getElementById('deviceListForm').submit();
}

在图片中：在第一个选择中是jquery过滤器后所选选项的外观，而在其他两个选择中则是"好的"所选选项。https://i.stack.imgur.com/TAJeY.png

编辑：所以，在第一次回复这篇帖子后（感谢Amit1992），我开始进一步挖掘。在Mozilla中，第一次点击后（出现边框或虚线后），会向服务器请求旧的所选项目（如果未选择，则为null），页面会在没有发生任何事情的情况下刷新。另一方面，在Chrome中，第一次点击不会发出任何请求。它只是选择（比方说）select标签。第二个选择提出了一个很好的要求。

短篇小说：

  • mozilla：点击1->请求旧的选定值->刷新->无更改

  • chrome:点击1->选择选择标签，没有请求->点击2->请求，因为它应该发生

  • IE-工作正常。单击->选择并加载页面。好吧，这真的让我很惊讶。起初我认为在IE中查看发生的事情是无用的。

EDIT2

经过一番挖掘，我得出结论，问题是在文本字段中键入时，select会失去焦点。如果我放入$('#selectedClientId').focus();在$(textbox).bind('change keyup', function()末尾的filterByText函数中，第一个选择在写入每个字符后进行聚焦。但这给了我另一个问题。我一次不能写超过1个字符。我必须点击文本字段，写一个字符，再次点击，写一字符等。

这可能会对您有所帮助。我对你的代码做了一些修改。

 $(function() {
    $('#selectedClientId').filterByText($('#textbox'), false);
  $("#selectedClientId").change(function(){
    alert("you have selected ++ " + $(this).val());
  });
});

我使用了jquery的change（）事件，而不是javascript onChange（）。你可以参考这个链接http://jsfiddle.net/amitv1093/q55k97yc/如果你正在使用jquery，我建议你完全使用它。

请告诉我它是否有效。

我通过更改整个过滤器函数解决了这个问题。有问题的函数取自堆栈溢出问题响应（如何使用jQuery动态筛选<select>的选项？）。问题是，根据我的结论，$(textbox).bind('change keyup', function()行改变了文本字段的焦点，所以第一次单击将焦点更改为select标记。新功能，工作原理取自同一篇文章，John Magnolia的答案是：

$(document).ready(function() { filterClient(); filterLocation(); //same as filterClient filterViewpoint(); //same as filterClient }); function filterClient(){ var $this, filter, $input = $('#filterClient'), $options = $('#selectedClientId').find('option'); $input.keyup(function(){ filter = $(this).val(); $options.each(function(){ $this = $(this); $this.removeAttr('selected'); if ($this.text().toLowerCase().indexOf(filter.toLowerCase()) != -1) { $this.show(); } else { $this.hide(); } }); }); }

相关文章：