Chosen: data-placeholder isn't working

Nevermind, I downloaded the tomapano branch and used the title attribute.

I meant the tompaton branch

I am facing this issue, and cannot solve it. Please assist.

If you are using jQuery older than 1.4.3, you need to add this fix, to add support for HTML5 data attributes to jQuery.data():

http://binarykitten.me.uk/dev/jq-plugins/288-html5-data-attributes-and-jquerys-data-pairing-made-in-heaven.html

I'm seeing the same issue and I'm using jquery 1.6.4...

Maybe you use a stripped down jquery? 1.6.4 should definitly work.

Nope it's the full version

Try building a minimal testcase to replicate the issue.

Try this:

http://marksteggles.com/chosen_test.html

You are using an old version of chosen, try again with the latest. And try using the non-minified version, that way it's easier to debug.

Why you do not use attr('data-placeholder') instead of data('placeholder')? It is much more portable and of the same order of simplicity.

@varepsilon: Keep in mind that one can write to jQuery's data hash without updating the attribute, so the two are not necessarily equivalent. For example:

<div id="foo" data-bar="baz"></div>

$('#foo').data('bar') // "baz"
$('#foo').data('bar', 'quux')
$('#foo').data('bar') // "quux"
$('#foo').attr('data-bar') // "baz"

Also, watch out for this trap:

<div id="commit" data-hash="368e54010865"></div>

$('#commit').attr('data-hash') // "368e54010865"
$('#commit').data('hash') // Infinity

@davidchambers: Ok, I see. But why not using more portable approach (tell users to specify attr() not data())? And why it claims jQuery 1.4.* compatibility when it is not true?

@varepsilon: I'm not one of Chosen's developers, so I can't say why it was decided to pull the value from the jQuery data hash rather than from the data-placeholder attribute.

You need to place an empty option before all options:

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select an Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

wuliang142857 on 24 May 2013

Facing the same issue, using the latest chosen & jquery2 with an empty option.

tomerz012 on 30 May 2013

I am also facing same issue..

sathishbabu007 on 20 Jun 2013

I had the same issue but just like mandrei99 said you need to have one empty option for this to work. Worked for me as soon as i added one.

grimurd on 22 Jun 2013

I had the same issue and doing placing an empty

first made it work. Thanks @magicsky

vinayraghu on 27 Aug 2013

Thanks @andrei-manescu that was all that was needed on my end ;)

answerquest on 9 Apr 2018

How come we need to add an empty option to make this appear, shouldn't it add it via javascript instead? Was searching for a while when I saw that it was only because of that.

Warface on 8 Sep 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

chosen:open doesnt work

vpode  ·  5Comments

---

$(".chzn-select").chosen is not a function

eduardokranz  ·  6Comments

---

Mouse wheel scrolling jerky in FireFox

scottdoc  ·  7Comments

---

Making a chosen input a required field

jbrooksuk  ·  6Comments

---

Bug when searching non-ASCII languages

ali1360  ·  5Comments