Skip to content
This repository

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

Closed
droppedonjapan opened this Issue · 7 comments

5 participants

Albert Engelbrecht Dmitry Matthew Willhite Patrick Filler lvendramini
Albert Engelbrecht

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 ($) {
     $(".chzn-select").chosen();
     $(".chzn-select-deselect").chosen({allow_single_deselect:true});

     $('#firstVal').attr('selected', true);
     $('#secondVal').attr('selected', true);
     $('#thirdVal').attr('selected', true);
     $('#fourthVal').attr('selected', true);
     $('#thisOne').trigger("liszt:updated");
  })
</script>
<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> 
   ...
</select>

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

Dmitry
kwinto commented

It is also described in issue 607

Matthew Willhite

I'm seeing this too on Chrome v18

Patrick Filler pfiller referenced this issue from a commit
Patrick Filler 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
b028f9e
Patrick Filler
Owner
pfiller commented

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

Patrick Filler pfiller closed this
lvendramini

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

Patrick Filler
Owner

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.

lvendramini

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 "".

Patrick Filler
Owner

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

$('#{select_id}').val([]).trigger('liszt:updated');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.