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

我正在尝试更改具有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它不再起作用了。我尝试了很少的东西，但没有任何效果。 任何想法如何让它工作？

小提琴

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

现在，诀窍是“选择：更新”。

更新的答案： 使用Chosen插件更改选择中的选择

Answer 4

使用插件Chosen.js它的工作原理。

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