在實際更改之前獲取onChange值選擇框

Question

我試圖開發一個函數，在實際更改之前從選擇框中獲取onChange值。

讓我們來想象我有這樣一個選擇框：

<select id='testing_combobox'> 
    <option value='0'>Test</option> 
    <option value='1'>Test 1</option> 
    <option value='2'>Test 1</option> 
</select> 

當我在一個特定的鏈接點擊我跑這下jQuery代碼：

$('#link').click(function(){ 
    $('#testing_combobox').val(299); 
}); 

現在，我想要的是有在選擇框中附加的觸發器將捕獲值299解析並根據一些規則進行驗證，如果一切正常，我會實際更改選擇框。

不，我無法更改.click功能，因爲它屬於外部模塊。

而且我也不能把val放入一個隱藏的輸入來驗證它。

任何想法？

Answer 1

您可以在按鈕「鼠標按下」，點擊其中前觸發點獲取的當前值：

$('#link').mousedown(function(){ 
    var combobox = $('#testing_combobox'); 

    combobox.data('prevVal', combobox.val()); 

}); 

有一些問題，你仍然面臨不過。當通過jQuery設置val（）時，更改事件不會觸發問題1.問題2是如果選擇選項列表中沒有有效值，val不會設置任何內容。

無需手動觸發change事件，你將不得不輪詢值，但由於問題2.

很可能會改變它在做什麼模塊，將不會有變化？你可以解除綁定事件並重新綁定你自己的，這是相當'哈克'

爲什麼不能使用隱藏的輸入？

Answer 2

這是一個工作fiddle。

HTML

<select id='testing_combobox'> 
    <option value='0'>Test</option> 
    <option value='1'>Test 1</option> 
    <option value='2'>Test 2</option> 
</select> 

JS

var isValid = function(itemVal) { 
    // Do your logic here are return true/false 
    // For now I am always returning false 
    return false; 
} 

var lastItemSelected = $('#testing_combobox').val(); 
$('#testing_combobox').change(function(event){ 
    var selectedItemVal = $(this).val(); 
    if(!isValid(selectedItemVal)) { // Check if it is not valid then select previous value 
     $(this).val(lastItemSelected); 
     return; 
    } 
    lastItemSelected = $(this).val(); 
}); 

// Trigger event on link click. You can assign whatever value you want to assign and then trigger change event. 
$('#link').click(function(){ 
    $('#testing_combobox') 
    .val('2') 
    .trigger('change'); 
}); 

希望這是你需要的東西！

Answer 3

這個問題是由佩德羅蒙泰羅張貼我的要求，所以，也許我可以更好地解釋它自己。

這個問題是一個例子，我會盡量總結真正的問題。

最初我們有一個超過40K條目的選擇框，這使得網站變得非常緩慢。由於我們已經開始使用名爲Selectize的外部模塊。

選擇什麼是隱藏最初的選擇框並刪除其中的所有條目，然後創建他自己的div，並且應該在最初的選擇框中輸入所有條目。

在實際應用中會發生什麼情況是這樣的： BEFORE：

<select id='test'> 
    <option value=1>test1</option> 
    <option value=2 selected>test2</option> 
    <option value=3>test3</option> 
</select> 

以後打電話SELECTIZE：

<select id='test> 
    <option value='2' selected>test2</option> 
</select> 

<div id='test-selectize'> 
    <div data-value=1>test1</div> 
    <div data-value=2>test2</div> 
    <div data-value=3>test3</div> 
</div> 

什麼情況是，每一個我選擇在selectize生成組合框的選項裏，他創建在初始選擇框中選定的項目並將其選中。

所以在最初的選擇框中，我只會有'真實的，選定的價值'。

直到這裏一切都完美。我們現在面臨的問題是，這是一個擁有數千條代碼行4年多的開發項目。

而且有很多代碼行會強制通過jquery選擇值到選擇框。像這樣$（'＃test'）。val（3）;

但是現在因爲我們使用了Selectize模塊，所以最初的選擇框沒有這個選項。

所以我們想要做的幾乎是一個try/catch，所以當我嘗試通過代碼來改變我的初始選擇框的值時，我抓住該事件而不是'改變'選擇框的值，我會調用我自己的函數，它將選擇Selectize模塊上的值。

簡單的解決方案是抓取過去4年中完成的所有代碼，並在每個地方強制選擇框中的.val我將重新編寫它以使用新模塊，但是，這非常耗時，當然錯誤會出現。

希望這解釋了這個問題更好。