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

您可以在按钮上获取“mousedown”点的当前值，然后在点击之前触发：

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

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

});

但是你仍然有一些问题。当通过jQuery设置val（）时，更改事件不会触发问题1.问题2是如果选择选项列表中没有有效值，则val不会设置任何内容。

如果不手动触发更改事件，则必须轮询该值，但由于问题2，该值不会更改。

模块是否可能改变它正在做的事情？你可以取消绑定事件并重新绑定你自己的事件，这非常'hacky'

为什么你不能使用隐藏的输入？

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

本期由Pedro Monteiro根据我的要求发布，所以，也许我可以自己更好地解释一下。

此报告的问题就是一个例子，我将尝试总结真正的问题。

最初我们有一个超过40k条目的选择框，这使得网站变得非常慢。由于我们已经开始使用名为Selectize的外部模块。

选择的方法是隐藏初始选择框并删除其中的所有条目，然后创建自己的div，其中包含应该位于初始选择框中的所有条目。

实际上，会发生什么：前：

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

打电话选择后：

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

每次在选择生成的组合框中选择一个选项时，他会在初始选择框中创建所选项目并将其选中。

因此，在初始选择框中，我只会选择真实的，选定的值＆＃39;。

直到这里，一切都很完美。我们现在面临的问题是，这是一个拥有超过4年开发成本和数千条代码行的项目。

并且有许多代码行会强制通过jquery选择值到选择框。像这样的东西（＆＃39; #test＆＃39;）。val（3）;

但是现在因为我们正在使用Selectize模块，所以初始选择框上没有该选项。

所以我们想要做的几乎是尝试/捕获，所以当我尝试通过代码更改我的初始选择框的值时，我抓住该事件而不是“改变”＃39;选择框的值我将调用我自己的函数，它将选择Selectize模块上的值。

简单的解决方案是获取在过去4年内完成的所有代码以及在我选择框中强制.val的每个地方我将重新编写它以使用新模块但是，这非常耗时，当然肯定会出现错误。

希望这能更好地解释这个问题。

在实际更改选择框

3 个答案: