Select multiple options by default using chosen plugin

Question

I am using a chosen plugin for my multi-select list. Here I want to select various options by default. I tried to follow some responses from this thread, and ended up using:

$("#laptop_product").val("Macbook 12").trigger('change');
$('#laptop_product').trigger('chosen:updated');

where laptop_product is the id of the select element:

<select name="products" multiple class="standardSelect" id="laptop_product" onchange="tableRefresh()" tabindex="5">

and Macbook 12 is one of the values in the dropdown list. However, this is not working and the options don't appear on the website.

The value of each option should be the same as the text, this is done in jQuery and extracted from other json file:

var laptop_data = jQuery('#laptop_product');
    jQuery.each(data, function (key, cat) {
        var laptop_keys = jQuery('<optgroup>',{label:key});
                jQuery.each(cat,function(key,item) {
                jQuery("<option/>",{value:key,text:key})
                .appendTo(laptop_keys);
        });
        laptop_keys.appendTo( laptop_data );
    });

It might be best to find the child element, apply `click` event to it, or apply `selected` property and `change`. Without seeing a Minimal, Reproducible Example, it is hard to tell if there is something further that Chosen is looking for, like the `value` of the option versus the text of the option. — Twisty, Feb 25 '22 at 22:48
@Twisty thank you for your reply, I added some edit how I am importing the data into the select - its from an external json file. I saw using the click and select method in this [example](https://stackoverflow.com/questions/8980131/changing-selection-in-a-select-with-the-chosen-plugin) However I am not sure what to put instead of `$('select')` and `$('button')` — Timmy333, Feb 25 '22 at 23:30
Thats ok, yet it does not provide an example of the Key and Value pairs or what the resulting HTML looks like. You might want to use the `.load()` callback, such that once the select is loaded, then find the item and trigger the `chosen:updated` event. Where do you initialize the select as a `.chosen()`? — Twisty, Feb 25 '22 at 23:41
@Twisty maybe the issue is the `laptop_product` because if I call `laptop_product.length` it yields 1. This is what I get when I print the laptop_product: https://imgur.com/a/lQOUjbl — Timmy333, Feb 26 '22 at 00:25

score 0 · Answer 1 · answered Feb 26 '22 at 01:23

Without a proper example, I can only suggest the following.

jQuery(function($) {
  var laptop_data = $('#laptop_product');
  $.each(data, function(key, cat) {
    var laptop_keys = $('<optgroup>', {
      label: key
    });
    $.each(cat, function(index, item) {
      $("<option/>", {
          value: index,
          text: item
        })
        .prop("selected", (item == "Macbook 12"))
        .appendTo(laptop_keys);
    });
    laptop_keys.appendTo(laptop_data);
  });
  laptop_data.chosen();
});

This builds the Select structure first. If a specific item matches, selected, will be set as a property.

It is a better practice to not re-use variable names inside of loops. It becomes ambiguous and may not get the proper results.

This is something that I have tried but I always get error saying `Uncaught TypeError: $(...).chosen is not a function` I have imported chosen-js into the html file, but not into the js file, but I assume that's not the issue — Timmy333, Feb 26 '22 at 11:04
@Timmy333 if that error is coming up, the library is not loading. Check your Console and Network tab. — Twisty, Feb 26 '22 at 16:18

Select multiple options by default using chosen plugin

1 Answers1