Html選擇無法更改選項後jsp jquery即時過濾器點擊

我有3個選擇標籤在一個頁面上，從struts2選擇標籤生成。我正在使用篩選select的jQuery篩選器函數。每個選擇都有一個文本字段，但它們都使用相同的過濾功能。我有另一個在onChange事件上調用的js函數。Html選擇無法更改選項後jsp jquery即時過濾器點擊

問題是，在添加此jQuery函數之前，我使用表單提交併重新加載頁面過濾列表，現在過濾發生即時，但是當我編寫過濾條件時，select以某種方式選擇失去焦點，當我單擊一個元素沒有選擇發生，或者更好地說是一種選擇：元素用虛線圈出，而不是用藍色填充的正方形選擇。 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')); 
});

二，其中一種選擇：

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

四，所述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 - >舊選定值的請求 - >刷新 - >沒有改變
Chrome：按1 - >選擇選擇標籤和沒有請求 - >點擊2 - >請求，因爲它應該發生
IE - 工作好。 1點擊 - >選擇並加載頁面，因爲它應該。好吧，這真的讓我感到驚訝。起初我認爲在IE中看看發生了什麼是沒用的。

EDIT2

一些挖後，我的結論是，問題是，在文本框輸入時選擇失去焦點。如果我在$(textbox).bind('change keyup', function()的末尾將$('#selectedClientId').focus(); 置於filterByText函數中，則在每寫入一個字符後，第一個選擇將被聚焦。但是這給了我另一個問題。我一次寫不超過1個字符。我必須點擊文本框，寫一個字符，再次點擊，寫一個字符等。

來源

2015-12-03 Tripon Ionut

我通過改變整個過濾器功能解決了這個問題。帶有問題的功能取自堆棧溢出問題響應（How to dynamic filter options of <select > with jQuery?）。問題是，根據我的結論，$(textbox).bind('change keyup', function()行正在改變焦點在文本字段上，所以第一次點擊就是將焦點改變爲選擇標籤。新的功能，即作品是從同一個崗位，約翰·玉蘭的回答所採取的一個：

$(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(); } }); }); }

來源

2015-12-07 12:27:01

可能這會幫助你。我在你的代碼中做了一些修改。

$(function() { 

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

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

我使用jQuery的change（）事件而不是javascript onChange（）。你可以參考這個鏈接http://jsfiddle.net/amitv1093/q55k97yc/，我建議你完全使用jQuery，如果你正在使用它。

請讓我知道它是否會工作。

來源

2015-12-03 15:06:30 AmitV

謝謝你，但它不工作。我所能得到的是「你已經選擇了++ null」和虛線的方塊。如果我按下提醒按鈕上的確定，然後再次單擊它可以工作，但是相同：需要2次點擊，並且第一次將使用空參數發出請求。而jsfiddle的例子也不行。該警報顯示任何東西，但空？好的東西很奇怪。我使用的主要是mozzila。在Mozilla jsfiddle顯示我null。我嘗試了Chrome瀏覽器，第一次點擊後沒有任何反應，第二次警報出現後，出現了很好的ID。 –

Html選擇無法更改選項後jsp jquery即時過濾器點擊

回答

相關問題