CODEWITHSUNDEEP
javascriptselectize.js
user2572790
user2572790

Reputation: 476

Pass html into selectize option

I used selectize html plugin for custom select tag.

I make html:

<select name="personAndType" class="form-control" multiple="multiple">
    
    <option value="1">demo1 <span class="badge badge-info">test</span></option>
  
    <option value="2">demo2 <span class="badge badge-info">test</span></option>
</select>

And want to have a bootstrap badge.

But it becomes

<div class="item" data-value="1">demo1 test<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>

So span tag just removed. I used plugin with $('...').selectize()

How to pass <span> into option correct?

Upvotes: 1

Views: 46

Answers (1)

Laszlo Hunyadi
Laszlo Hunyadi

Reputation: 1864

Use the render option in Selectize. Provide a function for item and option that returns the HTML you want to use:

$('select[name="personAndType"]').selectize({
    render: {
        item: function(data, escape) {
            return '<div class="item" data-value=' + escape(data.value) + '">' + escape(data.text) + ' <span class="badge badge-info">test</span></div>';
        },
        option: function(data, escape) {
            return '<div class="option" data-value="' + escape(data.value) + '">' + escape(data.text) + ' <span class="badge badge-info">test</span></div>';
        }
    }
});

Upvotes: 1

Related Questions