Selecting Options using jQuery with Multi-Select Causing Errors #609

droppedoncaprica opened this Issue May 4, 2012 · 7 comments

5 participants


When I attempt to set a option(s) as selected in a select that accepts multiple inputs and trigger the liszt:updated event Javascript throws an error saying an element is undefined (Uncaught TypeError: Cannot call method 'find' of undefined).

Using the example.jquery.html, I add id's to the Multiple Select field and a few of the options, and then run the liszt:updated event.

<script type="text/javascript">
  jQuery( function ($) {

     $('#firstVal').attr('selected', true);
     $('#secondVal').attr('selected', true);
     $('#thirdVal').attr('selected', true);
     $('#fourthVal').attr('selected', true);
<select data-placeholder="Choose a Country..." id='thisOne' class="chzn-select" id="2873829*&@#$*&![]" multiple style="width:350px;" tabindex="4">
   <option value=""></option> 
   <option id='firstVal' value="United States">United States</option> 
   <option id='secondVal' value="United Kingdom">United Kingdom</option> 
   <option id='thirdVal' value="Afghanistan">Afghanistan</option> 
   <option id='fourthVal' value="Albania">Albania</option> 
   <option value="Algeria">Algeria</option> 
   <option value="American Samoa">American Samoa</option> 
   <option value="Andorra">Andorra</option> 

Suddenly, error. Changing the tags to a Select with only one option seems to work fine. Maybe I'm missing something?


It is also described in issue 607


I'm seeing this too on Chrome v18

@pfiller pfiller added a commit that referenced this issue May 8, 2012
@pfiller pfiller Only clean up the deselect trigger for single selects (and don't call…
… the rest of results_reset)

Fixes #603, #607, #608, #609, #610

I believe this is now fixed in b028f9e. Please pull the latest and re-open if you're seeing the problem still.

@pfiller pfiller closed this May 8, 2012

Why is < option value = "" >< /option > needed??


Why is < option value = "" >< /option > needed??

You only need to include an empty optgroup in single selects if you want to use `data-placehodler. Single selects don't have an "unselected" state - that is, one option is always considered selected. Developers have used empty first options to serve as a kind of workaround.

In multiple select, an empty option is not necessary.


Great thank you. If it is multi-select how do you reset the control so the values selected are cleared (ie on clicking a submit button)?
Currently I use $(this.rootElement).val('').trigger('liszt:updated');
but I also have an option with the value "".


For multiple select, you need to pass an empty array.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment