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

Closed
droppedoncaprica opened this Issue May 4, 2012 · 7 comments

5 participants

@droppedoncaprica

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?

@kwinto

It is also described in issue 607

@miwillhite

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
b028f9e
@pfiller

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
@lvendramini

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

@pfiller

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

@pfiller

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