Question

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

问题是，在添加这个jQuery函数之前，我正在使用表单提交过滤列表并重新加载页面，现在过滤发生在当前，但是当我写一个过滤标准时，选择某种方式选择失去焦点，当我点击一个元素没有选择发生，或者更好的让我们说是一种选择：元素用虚线圈出，没有用蓝色填充方块选择。 js被调用，表单已提交，但具有旧值。但是，如果我首先点击选择哪里没有元素（空区域），然后我选择一个元素一切正常。我如何跳过第一次点击？

现在我的代码：

予。 jQuery过滤器函数以及对选择和文本字段的绑定。

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过滤器之后查看所选选项的方式，而在其他2个选择中是“好”选择的选项。 http://i.stack.imgur.com/TAJeY.png

编辑：所以，在对这篇文章的第一次回复后（感谢Amit1992），我开始进一步挖掘。在第一次单击后（在出现框架或虚线后）的Mozilla中，使用旧的选定项目向服务器发出请求（如果未选择任何项目，则为null），页面刷新时没有任何反应。另一方面，在Chrome中，第一次点击不会发出任何请求。它只选择（假设）选择标签。第二个选择提出了一个很好的要求。

短篇小说：

mozilla：点击1 - ＆gt;旧选择值的请求 - ＆gt;刷新 - ＆gt;没有变化
chrome：点击1 - ＆gt;选择select标签，不做任何请求 - ＆gt;点击2 - ＆gt;请求，因为它应该发生
IE - 工作正常。 1点击 - ＆gt;选择并加载页面应该。好的，这让我很惊讶。起初我认为在IE中查看会发生什么是没用的。

EDIT2

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

Answer 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。

请告诉我它是否有效。

Answer 2

我通过改变整个过滤功能解决了这个问题。有问题的函数来自堆栈溢出问题响应（How to dynamic filter options of <select > with jQuery?）。根据我的结论，问题是$(textbox).bind('change keyup', function()行正在改变文本字段的焦点，因此第一次点击是将焦点更改为选择标记。新功能，有效的功能取自同一篇文章，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(); } }); }); }

在jsp {j} {j}中使用jquery即时过滤器后点击Html选择不更改选项

2 个答案: