CODEWITHSUNDEEP
jqueryjquery-chosen
I_Debug_Everything
I_Debug_Everything

Reputation: 3816

Multiline options in jquery chosen

Is there any way to create a multiple line options for jquery chosen? I looked through the docs for the options to be passed to the chosen plugin but didn't got any help though. Any help appreciated.

Update:

Added some code:

In the js file:

$('.mySelect').chosen();

In the html:

<select class="mySelect" data-placeholder="Choose any food item">
 <option value="Mango"></option>
 <option value="Chocolate"></option>
 <option value="Milk"></option>
</select>

What i've tried so far is :

<option><span>Milk</span><br><span>Category-dairy</span></option>

But this doesn't works since the chosen plugin updates the data inside the option tag to be an li element.

Upvotes: 2

Views: 2509

Answers (2)

AntonK
AntonK

Reputation: 2320

There is a fork of chosen that allows you to specify a template for select options. https://github.com/thomasf1/chosen-with-templates

e.g.

<select data-placeholder="Choose your favorite candy..." class="chzn-select-template-example chzn-done" style="width: 350px; display: none;" tabindex="-1" id="sel4UA">
      <option value=""></option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel1">M&amp;Ms</option>
      <option data-type="fruity" data-ico="http://cdn1.iconfinder.com/data/icons/iconshock_vista_CharlieandtheChocolateFactory/png/24/CharlieandtheChocolateFactory1.png" value="sel2">Starburst</option>
      <option data-type="fruity" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel3">Skittles</option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/fatcow/16/candy_cane.png" value="sel4">Reese's</option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel5">Snickers</option>
</select>

script

$(".chzn-select-template-example").chosen({
  template: function (text, value, templateData) {
    return [
      "<img src='" + templateData.ico + "' height='16' width='16'></img> " + text + "</i> value: " + value         
    ].join("");
  }
});

Upvotes: 1

Fenistil
Fenistil

Reputation: 3801

Try to use select2, which is based on chosen, but has a lot more options and a lot of bug-fixes.

Upvotes: -1

Related Questions