Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Add functionality to allow templates #692

wants to merge 5 commits into from

I've added the functionality to allow templates in dropdowns by using the data attribute on options and a template option when setting up chosen.

I've compiled the code and provided jquery and prototype examples.

Below is the jQuery example.


<select data-placeholder="Choose your favorite candy..." class="chzn-select-template-example" style="width:350px;" tabindex="11">
  <option value=""></option>
  <option data-type="chocolate" data-user-rating="1.8">M&Ms</option>
  <option data-type="fruity" data-user-rating="1">Starburst</option>
  <option data-type="fruity" data-user-rating="7">Skittles</option>
  <option data-type="chocolate" data-user-rating="9">Reese's</option>
  <option data-type="chocolate" data-user-rating="10">Snickers</option>

Initialize It:

  template: function (text, templateData) {
    return [
      "<span style='float: right'>User Rating: " + templateData.userRating + "</span>",
      "<div>" + text + "</div>",
      "<div><i>type of candy: " + templateData.type + "</i></div>"         



Thanks to Elliott Wood for code reviewing and to Select2 for inspiration.


Would love this.


This would definitely be much nicer than my current solution of hacking the data I need into Chosen.


I would love to see this added to Chosen - great feature, and far better than hacking.




:thumbsup: +1


This and functionality for adding custom options are pretty neat but not supported when chosen is not loaded (e.g. plain <select>). And I think that's a reason for the holdback of merging this kind of functionality.
But of course only @pfiller's knows what the real reasons are :)


@koenpunt Thanks! If chosens not loaded the attributes on the options are still valid and usable by jQuery.


@cjstewart88 What I mean is that when JavaScript is disabled, the extra functionality is not available, so users are missing out. And therefore it may be better to keep this 'addons' in their own branches/repositories.


@koenpunt hmm, but if JavaScript is disabled the entire chosen plugin doesn't work, not sure I'm following why it shouldn't be included in the library.


+1 users disabling javascript should be used to a large scale lack of functionality. I'd love this in my projects also. @brianfeister make that a spinning dinosaur in that animated gif and you've got a deal!


@cjstewart88 True, the plugin doesn't work, but as Chosen is a selectbox enhancer and not an extender, this doesn't take away any of the functionality, only the experience.

@koenpunt koenpunt referenced this pull request

Image option #831


I'm sorry, but i can't use this functionality. i copy the same code of @cjstewart88 but, for me no show the style, in firebug any error show, and i don't know what can i do.

so, what can i do?


I noticed it was mentioned select2 was inspiration; but, this really nice functionality to have in the core library that really makes use of complex select options very easy. Thanks!


The guys in the 0.9.10 version that runs this method? Or to prescribe what that CSS style?


I´ve updated cjstewart88´s solution:
1. The templates are used for displaying not only in the dropdown, but also for selected values and the default values (basically everyhere a option is displayed)
2. The Template gets handed the text and the value of an option
3. Updated to work with the latest Version


@pfiller pfiller referenced this pull request

Template support #964


Any update on this @pfiller?

@pfiller pfiller referenced this pull request

Adding custom html cells. #1199


+1 (Plus I think it should also use @thomasf1's suggestions above)


Any chance on this getting merged in @pfiller, @kenearley and @stof?




Merge this in already! :(


Short question about those templates:
Is it possible to get those data Values into the selected field? So not only inside the drop-down but also when I selected one that it will show the data?

@tjschuck tjschuck referenced this pull request

Custom html #1659


Is any progress?


@oachkatzl +1 to the last comment

Is there any date when it will be merged?


Wanna know too!!!!


how has this gone ignored for 2 YEARS. BUMP!!

This was referenced




Such a useful addition, sad it's been left hanging for so long even with so many people consistently requesting it. Please merge this.


Today I was converted, I will no longer use chosen.js, we are deprecating it, switching to Select2, it supports this templating as well as searchable keywords.


Select2 is too heavy.


This is brilliant! +1


This would really help us out. +1


+1 to this. Can't believe that the work is done and it's not being merged in. Really sad to see - we'll steer away from using chosen in the future.


As much as I like using chosen.js I am now slowly switching to using Select2.js

@tjschuck tjschuck referenced this pull request

Allow images in select #2055


+1 on this.




Hi guys,

I need to use jquery-chosen library in my project, but I can't because of this issue.

I could, however, use this project instead:

I just want to know if there's any plans to fix this in the recent future, or I should use the other project.

This is really important for me, because later on the migration might be really hard to do. Just some rough idea when can we expect to have this fixed.

Thanks a lot.


@paranoiabla or you can just use chosen and apply this patch to allow custom templating


@yuvii I can't really because I'm using webjars, so It has to be a webjar project. I really can't believe that an issue with a pull-request attached to it still open after 2.5 years... that's just embarassing..


@paranoiabla first of all - chosen hasn't been updated at all for a couple of years now. It's their decision to make. If you want, there's select2 which is a fork that is still in developement.

Secondly - I'm not familiar with webjars, but doesn't it let you add your own custom javascript files?



chosen hasn't been updated at all for a couple of years now.

This is empirically false, and disrespectful to the many people who have contributed to Chosen voluntarily and in their spare time.

Open source is people. Be nice.


@tjschuck Sorry, I wasn't trying to offend anyone. I think chosen is amazing. It's a fantastic piece of work, and I have used it myself for a few projects, including expanding a few parts of it (so I've seen and edited the source code, and I know how good it is). I really admire what you guys did here, and always preferred chosen over similar libraries that are overly-complex and feature heavy (such as select2)

It's just that in the last few years I haven't noticed any major updates or new features to the library. Perhaps I haven't noticed them, or it was only for a small period of time. Anyway, all I meant was that he shouldn't be mad that you guys don't add new features like this, because you might be focusing on other projects, and that he should just resolve the issue himself. Again, sorry for my phrasing, I can be terrible at it


I guess the biggest problem is the silence about this issue. It seems to be pretty major, but when I ask if there's any plans to fix it in the near future, then all I get is silence. A simple yes or no would be sufficient. Without an answer I am unable to make a decision if I should use chosen at all.


@yuvii :thumbsup: :heart:

@paranoiabla You describe this as a "major issue" that needs "fixing", but it's not that at all -- it's a feature addition, not a bug fix.

There are many reasons a feature might not be immediately merged. But the most likely reason is just that this is a complicated addition with a big diff that will require full code review, QA, documentation, and future maintenance, and someone just hasn't had the free time to do all of those things quite yet.

If you want to use this feature as is, dowload the source, apply the patch, and use it. Just as we've made the master branch of Chosen open source, this contributor has made his code just as freely available for you to use.


@tjschuck My question is still unanswered, so I will just assume that it's too complicated to merge a pull request for 2 and a half years so it will not be done in the near future :)


It seems that due to this delay all possible users of the plugin will migrate to select2 in spite of it is heavy but it more configurable.


Chosen vs Select2: make up your mind ;)


Is this pull request merged yet? Because I could not get this work on Chosen v1.4.1 (latest for now).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 28, 2013
  1. @cjstewart88
  2. @cjstewart88

    Remove nulls when calling .template() function and changed .text() ba…

    cjstewart88 committed
    …ck to .html() to prevent breaking previous functionality.
  3. @cjstewart88
  4. @cjstewart88

    Changed order of params for the template function and camel cased tem…

    cjstewart88 committed
    …plate data keys to be more normal javascript standard.
  5. @cjstewart88

    Camel case the returned templateData in the examples, use @ to invoke…

    cjstewart88 committed
    … a method on this, and use .html instead of .text to stick to previous convention.
Something went wrong with that request. Please try again.