在实际更改之前获取onChange值选择框
我试图开发一个函数,在实际更改之前从选择框中获取onChange值。在实际更改之前获取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放入一个隐藏的输入来验证它。
任何想法?
您可以在按钮“鼠标按下”,点击其中前触发点获取的当前值:
$('#link').mousedown(function(){
var combobox = $('#testing_combobox');
combobox.data('prevVal', combobox.val());
});
有一些问题,你仍然面临不过。当通过jQuery设置val()时,更改事件不会触发问题1.问题2是如果选择选项列表中没有有效值,val不会设置任何内容。
无需手动触发change事件,你将不得不轮询值,但由于问题2.
很可能会改变它在做什么模块,将不会有变化?你可以解除绑定事件并重新绑定你自己的,这是相当'哈克'
为什么不能使用隐藏的输入?
谢谢!这可能是一个解决方案,但实际上我需要知道链接ID,这将是很难知道.... –
他们都拥有相同的类?您可以更改选择器以解除绑定,以获得您需要的所有链接按钮,或者它们位于具有已知ID或类的容器中? –
这是一个工作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');
});
希望这是你需要的东西!
谢谢!但我的问题是我没有选择任何东西之前点击... –
在select中设置一些默认值,并将它们的值设置为NULL。例如:''。那有意义吗? – deepakb
这个问题是由佩德罗蒙泰罗张贴我的要求,所以,也许我可以更好地解释它自己。
这个问题是一个例子,我会尽量总结真正的问题。
最初我们有一个超过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我将重新编写它以使用新模块,但是,这非常耗时,当然错误会出现。
希望这解释了这个问题更好。
.val不会触发更改事件,只有用户输入将会,所以您必须手动触发事件,方法是将.trigger('change')添加到针对选择菜单的任何对val()的调用中。另一种选择是在任何地方使用val()设置所选择的菜单并用updateVal替换val并实现以下内容:$ .fn.updateVal = function(value){ //选择逻辑 } –
可能重复的[获取选择(下拉)的价值改变前](http://*.com/questions/4076770/getting-value-of-select-dropdown-before-change) – guradio
这不是什么我需要......但谢谢你!我的问题有点不同。 –