Question

我有一个select2下拉列表，其中包含4个选项代码：

<select id="ddlInqOn" class="InqSelect2 form-control">
  <option value="1">--All--</option>
  <option value="2">Today Date</option>
  <option value="3">Past Date</option>
  <option value="4">Feature Date</option>
</select>

此select2：

调用了

javascript

$('.InqSelect2').select2({
  dropdownAutoWidth: 'true',
  multiple: true
});

我希望实现类似于单击所有选项然后删除其他选项，如果选择了其他选项，则从选择中删除所有选项。

我试过这段代码：

$('body').on('change', '#ddlInqOn', function() {
  debugger;
  //
});

但是更改事件没有被触发，所以跟踪select2下拉列表更改事件的其他任何可能性？

Answer 1

Select2使用jQuery事件系统。因此，您可以使用JQuery on方法附加到select2事件。

然后你可以设置select元素的值并触发change事件来更新选择框。

您可以通过以下方式完成所提出的问题。

$('.InqSelect2').on('select2:select', function (e) {

    if (e.params.data.id == 1){
        $(this).val(1).trigger('change');
    }else{
        values = $(this).val();
        var index = values.indexOf('1');

        if (index > -1) {
            values.splice(index, 1);
            $(this).val(values).trigger('change');
        }
    }
});

请注意，我使用'1'作为--All--选项的值。如果您不清楚，请随时向我询问。

https://jsfiddle.net/c6yrLoow/

希望有所帮助：）

Answer 2

@Nimeksha给出的答案在@ Nimeshka给出的jsfiddle中完美地工作但在我的代码中我无法在下拉列表中获得触发事件的变化，并且在搜索之后我从here找到了解决方案。代码在这里：

PostTitle

我也尝试过：

PostBrief

但它不起作用。也是由id #ddlInqOn不起作用。

为什么上面的代码与$(document).on('change', '.InqSelect2', function () { debugger; if (e.params.data.id == 1) { $(this).val(1).trigger('change'); } else { values = $(this).val(); var index = values.indexOf('1'); if (index > -1) { values.splice(index, 1); $(this).val(values).trigger('change'); } } });一起工作，我不知道，但它对我有用。

再次感谢@Nimeshka

选择2下拉列表多个选择和取消选择

2 个答案: