.trigger("chosen:updated") does not right to selected the option that i give

[blankhang]

when i try to re select dirrert value via ajax
the first time the function do the right thing
after twice or more when i changed the num1 select option
the other num2 select should be updated by select something else option val
but not multiple all the option i need selected or no one selected at all

Expected behavior

Tell us what should happen.
when i change the one select elment
the select 2 need by selected other option basic the option i get via ajax

Actual behavior

Tell us what happens instead.

Environment

• Chosen Version: 1.6.2
• jQuery or Prototype Version:
• Browser and Version: chrome 54.0.2840.59 m (64-bit)
• OS and Version: WIN7 SP1 64BIT

1 2 3 4 doing some for funtion{ $("#one option[value=1]').attr('selected', true); } $("#one").val(1).trigger("chosen:updated");

one val 1

then

1 2 3 4 doing some for funtion{ $("#one option[value=1]').attr('selected', true); $("#one option[value=3]').attr('selected', true); } $("#one").val(1).trigger("chosen:updated");

then maybe i get nothing to selected after sometimes later???
i dont know i to do so it can selected the right option that i needed after ?

[blankhang]

sorry for my poor's english 😭

[koenpunt]

If I understand correctly, you add new options to the select using an ajax request, and then you trigger chosen:updated to make Chosen reflect the changes?

Please set up a fiddle to demonstrate the problen, and then we can decide if it's a bug or just an issue with your implementation.

[blankhang]

THANKS FOR REP this

NOT LIKE THAT .. not refresh the option list
the option list is all the way same
but the value not so
every time i wanna change the value i trigger chosen:updated via jQuery
when i first time the value of the selected items was right
but will go wrong when serivel times later
i can't get the right value of the select elment....


when firsttime load the function was right just one option need to be selected

then once again

it should be like this

https://jsfiddle.net/4jtsdnt7/ someof

[asimp51]

Hi blankhang,
your problem can be solved by this.
what you are doing:
$("#one option[value=1]').attr('selected', true);
$("#one option[value=3]').attr('selected', true);
$("#one").val(1).trigger("chosen:updated");

what need to be done

$("#one option[value=1]').attr('selected', true);
$("#one option[value=3]').attr('selected', true);
$("#one").trigger("chosen:updated");

dont give any value while trigger the update;

[cinemazealot]

I experienced the same issue after updating the select state of the options of a multiple select by JS, then trying to update Chosen to show the selection. I've made a fiddle that demonstrates this behavior:

https://jsfiddle.net/5wbzxg27/

There are 3 buttons:

• select all options,
• select some of the options,
• select the remaining options.

Each option shows up only once in the Chosen box, even if you press the same button (and updating it) several times. The script runs okay, the selected state of the original select options changes okay, but the Chosen shows the options only the first time.

Hope, this helps.

[pashaUSA]

@cinemazealot try following code:

$("#mySelect").chosen({
       placeholder_text_multiple: 'Something',
});
$('button#all').on('click', function() {
  $('#mySelect option').attr('selected', false);   // selects all
  var options = [];
  for (var i=0; i < $('#mySelect option').length; i++){
    options.push($('#mySelect option')[i].value);
  };
  $('#mySelect').val(options);
  $("#mySelect").trigger("chosen:updated");       // updates chosen
  return false;                                   // returns false not to post the surrounding form
});
$('button#first').on('click', function() {
  $('#mySelect option').attr('selected', false);  // clears all
  var options = [];
  for (var i=0; i < $('#mySelect optgroup[label="first"] option').length; i++){
    options.push($('#mySelect optgroup[label="first"] option')[i].value);
  };
  $('#mySelect').val(options);
  $("#mySelect").trigger("chosen:updated");       // updates chosen
  return false;                                   // returns false not to post the surrounding form
});
$('button#second').on('click', function() {
  $('#mySelect option').attr('selected', false);  // clears all
    var options = [];
  for (var i=0; i < $('#mySelect optgroup[label="second"] option').length; i++){
    options.push($('#mySelect optgroup[label="second"] option')[i].value);
  };
  $('#mySelect').val(options);
  $("#mySelect").trigger("chosen:updated");       // updates chosen
  return false;                                   // returns false not to post the surrounding form
});

It might look clunky and big, but it seem to work

[cinemazealot]

@pashaUSA you are the best! :) Sorry for the late reaction, I had other running projects. But your solution just does that it supposed to do. Thanks a lot! :)