Change the value of Chosen.js select box using jQuery

Question

I'm trying to change the value of my select box which has Chosen.js overlay. The idea is to change the selected value when user clicks a button.

With regular select box I can change the value by doing:

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

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

But with Chosen.js it doesn't work anymore..I have tried few things but nothing has worked. Any ideas how to get it work?

Fiddle

possible duplicate of [Changing selection in a select with the Chosen plugin](http://stackoverflow.com/questions/8980131/changing-selection-in-a-select-with-the-chosen-plugin) — Chamika Sandamal, Apr 11 '14 at 05:03

score 24 · Accepted Answer · answered Mar 13 '12 at 05:52

24

So after posting this question I continued trying to solve this problem and happened to found out a way to do this.

$('#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");
});

The key was to put .chosen() before .change() and then trigger "liszt:updated". It works but I don't know if this is the best way to do this..

If you have a better way to do this, please let me know

answered Mar 13 '12 at 05:52

Spitz

713
1
9
17

you can also see @LuizCarlosLucena answer about also being able to use "chosen:update" – Code Uniquely Apr 16 '14 at 08:05
chosen:update is used in the latest version, for legecy versions use liszt:updated – Samih A Jan 24 '15 at 08:06

score 8 · Answer 2 · edited Oct 11 '12 at 01:01

8

I stumbled across this trying to figure it out myself.

I was able to do it with a combination of changing the selected index on the original field, and then triggering the liszt:updated event on that field:

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

edited Oct 11 '12 at 01:01

Littm

4,923
4
30
38

answered Jul 23 '12 at 20:48

Semyaz

91
1
3

score 5 · Answer 3 · edited May 23 '17 at 12:13

Just an update (I found this page from google, maybe other people will find it also)

I've tryed to comment the @splitz's answer but I couldn't because I still don't have enough reputation.

The new way to do it is:

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

Now, the trick is the "chosen:updated".

Updated answer found on: Changing selection in a select with the Chosen plugin

score 2 · Answer 4 · edited Feb 27 '13 at 15:12

2

With the plugin Chosen.js it works.

var myIndex = 4;

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

edited Feb 27 '13 at 15:12

Ry-

218,210
55
464
476

answered Feb 27 '13 at 14:53

Marta

21
2

Change the value of Chosen.js select box using jQuery

4 Answers4

Linked