bootstrap select 事件参数

Question

我正在使用 bootstrap select 插件 (http://silviomoreto.github.io/) and I am handling the change event "changed.bs.select" to capture any selection changes. As per the documentation at https://silviomoreto.github.io/bootstrap-select/options/, " 此事件在 select 的值更改后触发。它通过事件，单击索引、新值、旧值。“

我想了解 newValue 和 oldValue 到底代表什么。因为总是出现新值是真旧值是假的情况。

这里有一个fiddle来说明我的观点。

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);
});

Answer 1

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

Answer 2

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

jQuery

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

Answer 3

如果您希望有预期的行为，只需改变

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

Answer 4

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

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

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

newValue: true 和 oldValue: false

如果选择的选项之前被选中，它将return像这样：

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

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

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

bootstrap select 事件参数

bootstrap select event parameters

jquery

twitter-bootstrap

bootstrap-select