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

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

问题是，在添加这个jQuery函数之前，我用表单提交过滤列表并重新加载页面，现在过滤会立即发生，但当我编写过滤条件时，选择会失去焦点，当我单击某个元素时，不会发生选择，或者更好地说是一种选择：元素用虚线圈出，而不是用蓝色填充的正方形来选择。js被调用，表单被提交，但使用旧值。但是，如果首先单击“选择无元素的位置”空区域，然后选择一个元素，则一切正常。我怎样才能跳过冷杉

现在我的代码是：

I.jQuery筛选函数以及与selects和textfields的绑定

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'));
});

二,。其中一项选择：

<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()"
 />

三、 选择的文本字段：

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

四、 onchange选择：

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

在图中：在第一个选择中，是jquery筛选后所选选项的外观，在其他两个选择中，是良好的所选选项。

编辑：所以，在第一次回复这篇文章之后，我开始进一步挖掘。在Mozilla中，在框架或虚线出现后，第一次单击后，会向服务器发出一个带有旧选定项的请求，如果未选定项，则会刷新页面，因为未发生任何事件。 另一方面，在Chrome中，第一次点击不会发出任何请求。它只是选择，比如说选择标签。第二次选择是一个很好的请求

短篇故事：

mozilla：单击1->使用旧选定值请求->刷新->无更改

chrome：单击1->选择选择标记，但未提出任何请求->单击2->按应发生的方式提出请求

IE-工作正常。1单击->选择并加载页面。好吧，这真让我吃惊。起初，我认为调查发生了什么是没有用的

编辑2

经过一番挖掘，我得出结论，问题在于在文本字段中键入时，select会失去焦点。如果我把$'selectedClientId'。焦点；

---

在$textbox.bind'change keyup'末尾的filterByText函数中，每次写入字符后都会聚焦第一次选择。但这给了我另一个问题。我一次最多只能写一个字符。我必须单击文本字段，写一个字符，再次单击，写一个字符等等。

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

 $(function() {

    $('#selectedClientId').filterByText($('#textbox'), false);
  $("#selectedClientId").change(function(){

    alert("you have selected ++ " + $(this).val());
  });
});

我使用jquery的change事件而不是javascript onChange。 您可以参考这个链接，如果您正在使用jquery，我建议您完全使用它

---

请让我知道它是否会工作

我通过改变整个过滤函数解决了这个问题。有问题的函数取自堆栈溢出问题响应。问题是，从我的结论来看，$textbox.bind'change keyup'，函数行改变了文本字段的焦点，所以第一次单击是将焦点改变为select标记。新的功能，有效的功能取自同一帖子，John Magnolia的回答：

$document.readyfunction{ 过滤客户； filterLocation；//与filterClient相同 filterViewpoint；//与filterClient相同 }; 函数过滤器客户端{ var$this，filter， $input=$'filterClient'， $options=$'selectedClientId'。查找'option'； $input.keyupfunction{ 过滤器=$this.val； $options.eachfunction{ $this=$this； $this.removeAttr'selected'； 如果$this.text.toLowerCase.indexOffilter.toLowerCase！=-1{ $this.show； }否则{ $this.hide； } }; };

---

}

谢谢，但它不起作用。我能得到的只是你选择了++空和虚线方块。如果我按下警报按钮上的ok，然后再次单击，它会工作，但是是相同的：需要两次单击，第一次单击将发出一个带有null参数的请求。JSFIDLE示例也不起作用。该警报显示除null以外的任何内容？好吧，有点奇怪。我使用的主要是mozzila。在mozilla中，JSFIDLE向我显示空值。我在chrome上试过，第一次点击后什么也没发生，第二次点击后，警报显示为良好的id。