引导选择事件参数答案

【问题标题】：bootstrap select event parameters引导选择事件参数
【发布时间】：2016-05-22 19:32:07
【问题描述】：

我正在使用引导选择插件 (http://silviomoreto.github.io/)，并且我正在处理更改事件“changed.bs.select”以捕获任何选择更改。根据https://silviomoreto.github.io/bootstrap-select/options/ 的文档，“此事件在选择的值更改后触发。它通过事件、clickedIndex、newValue、oldValue。”

我想了解 newValue 和 oldValue 究竟代表什么。因为总是新值为真而旧值为假的情况。

这里有一个小提琴来说明我的观点。

https://jsfiddle.net/muojdbh9/

HTML

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<div class="res">
Waiting for a change event
</div>

jQuery

$(".selectpicker").on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    $("div.res").html("newValue: " + newValue + "<BR>oldValue: " + oldValue);
});

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-select

【解决方案1】：

如果你喜欢预期的行为，只需改变

that.$element.trigger('changed.bs.select', [clickedIndex, $option.prop('selected'), state]);

到

that.$element.trigger('changed.bs.select', [clickedIndex, $option.prop('value'), prevValue]);

在你的 bootstrap-select.js 中

【讨论】：

这也是一个很好的建议，+1，但是我不太热衷于更改 3rd 方库代码以避免在更新到较新版本时出现任何问题未来

【解决方案2】：

这不是错误。 newValue 和 oldValue 的行为似乎与您预期的不同。 newValue 和 oldValue 的操作方式相同。您看到的布尔值是指所选选项的先前状态和新状态。

true 表示选中，false 表示未选中。

如果新选择的选项之前没有处于选中状态，它将像这样返回：

newValue: true 和 oldValue: false

如果选择的选项之前被选中，它将返回如下：

newValue: false 和 oldValue: true 因为它取消了选择元素。

caseyjhol 在这里解决了这个问题：

https://github.com/silviomoreto/bootstrap-select/issues/1378/#issuecomment-216393099

【讨论】：

感谢您的解释。它只是表现得不像人们期望的那样。

【解决方案3】：

newValue 表示新选择的选项的“selected”属性，而oldValue 表示之前选择的选项的“selected”属性。由于新选项将始终被选中而旧选项将始终未选中，因此它们分别返回 true 和 false。这可能是 bootstrap select 开发人员的错误 - 似乎他们打算传递选项元素本身或选项值，而不是它们的“选定”属性。

【讨论】：

我同意这一定是一个错误，因为我找不到很好的解释。

【解决方案4】：

我也遇到了这个问题。感谢 TAGraves 对正在发生的事情的解释。最终使用了这样的解决方案：

jQuery

$(".selectpicker").on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
    var Value = $(".selectpicker option:selected").val()
});

【讨论】：

$(this).val() 应该做同样的事情，代码更少。