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 );
});
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.