在实际更改之前获取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我将重新编写它以使用新模块，但是，这非常耗时，当然错误会出现。

希望这解释了这个问题更好。