Selectize.js: Data Attributes in Selectize Options

[geordee]

I am using Selectize following the State City example. Is it possible to store some additional data from the Ajax request along with every option in City select?

Say, if I want to store the population along with each option, in one of the following ways...

<option value="Milwaukee" data-population="598916" selected="selected"></option>

<div data-value="Milwaukee" data-selectable="" data-population="598916" class="option selected">Milwaukee</div>

I'd be able to use the option-specific data later without going back to the server.

[artiaggarwal]

yes, you can do it with render... store any number of values. .. see below

$(ele).selectize({
    delimiter: ';',
    labelField: "label",
    valueField: "value",
    searchField: "label",
    render:       {
        item: function(data) {
    return "<div data-value='"+data.value+"' data-iso='"+data.population+"' data-type='"+data.type+"' class='item'>"+data.label+" </div>";
    }
});

[geordee]

Thank you!

[ryannealmes]

Is this still working? I came across this issue and could not get it working. After looking around the repo it seems a couple of other guys have run into the problem https://github.com/brianreavis/selectize.js/issues/239 and could not get it working.

Any ideas?

In my case I can't access any data attributes I add in my select after I selectize.

Thanks.

[Jaxattack]

Hi, cannot get this to work trying to read from a loop of options, I need to input data via data-attributes

[geordee]

If I understand correctly by providing render settings, we are overriding default render templates.

See https://github.com/brianreavis/selectize.js/blob/master/src/selectize.js#L298

Also have another look at the code of "Remote Source — Rotten Tomatoes" example in http://brianreavis.github.io/selectize.js/

[OIlnytskiy]

@artiaggarwal is it possible to get than data-iso values from all the selected items ?

for example in my case

I have multiselect and it successfully render and keep custom attr data-type.
But how can I access that attribute?

I can gen only selected values
$('#multiple option:selected').each(function(){
console.log($(this).val());
});