data-placeholder isn't working #176

MB34 opened this Issue Aug 11, 2011 · 20 comments

I would rather see this be an option.

In FF5.0 and IE9 still shows "Select Some Options"

  <select data-placeholder="Select State(s)..." class="state_list" multiple>
    <option value=""></option> 
    <option value="OL">(Online Courses)</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="PR">Puerto Rico</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>

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

@MB34 MB34 closed this Aug 11, 2011

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


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.


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.


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


I am also facing same issue..


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.


I had the same issue and doing placing an empty first made it work. Thanks @magicsky

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment