Question

我正在尝试更改包含Chosen.js叠加层的选择框的值。我们的想法是在用户点击按钮时更改所选值。

使用常规选择框，我可以通过执行以下操作来更改值：

$('#GroupsShowNext').unbind("click").click(function() {
    var index = $("#GroupsViewGroups").prop("selectedIndex");
    index += 1;

    $('#GroupsViewGroups option').eq(index).attr('selected', 'selected');
    $('#GroupsViewGroups').change();
});

但是对于Chosen.js它不再起作用了。我尝试了很少的东西，但没有任何效果。任何想法如何让它工作？

Fiddle

Answer 1

所以在发布这个问题后，我继续尝试解决这个问题，并且碰巧找到了解决这个问题的方法。

$('#GroupsShowNext').unbind("click").click(function() {
    var index = $("#GroupsViewGroups").prop("selectedIndex");
    index += 1;
    $('#GroupsViewGroups option').eq(index).attr('selected', 'selected');
    $('#GroupsViewGroups').chosen().change();
    $("#GroupsViewGroups").trigger("liszt:updated");
});

关键是在.change（）之前放入.chosen（），然后触发“liszt：updated”。它有效，但我不知道这是否是最好的方法..

如果您有更好的方法，请告诉我

Answer 2

我偶然发现了这个想要弄清楚自己的事情。

我能够通过更改原始字段上的所选索引，然后在该字段上触发liszt:updated事件来完成此操作：

$('#GroupsViewGroups')[0].selectedIndex = $('#GroupsViewGroups')[0].selectedIndex + 1;
$('#GroupsViewGroups').trigger('liszt:updated');

Answer 3

只是一个更新（我从谷歌发现这个页面，也许其他人也会发现它）

我试图评论@ splitz的回答，但我不能，因为我仍然没有足够的声誉。

新方法是：

$('#GroupsShowNext').unbind("click").click(function() {
    var index = $("#GroupsViewGroups").prop("selectedIndex");
    index += 1;
    $('#GroupsViewGroups option').eq(index).attr('selected', 'selected');
    $("#GroupsViewGroups").trigger("chosen:updated");
});

现在，诀窍是＆＃34;选择：更新＆＃34;。

更新了答案：Changing selection in a select with the Chosen plugin

Answer 4

使用插件Chosen.js可以正常工作。

var myIndex = 4;

$("select#GroupsViewGroups").prop('selectedIndex', myIndex);

使用jQuery更改Chosen.js选择框的值

4 个答案: