data-placeholder isn't working #176

Closed
MB34 opened this Issue Aug 11, 2011 · 20 comments
@MB34

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>
  </select>
@MB34

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

@MB34 MB34 closed this Aug 11, 2011
@MB34

I meant the tompaton branch

@ni5ni6

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

@felixbuenemann

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

@FutureKode

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

@felixbuenemann

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

@FutureKode

Nope it's the full version

@felixbuenemann

Try building a minimal testcase to replicate the issue.

@felixbuenemann

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.

@varepsilon

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

@davidchambers

@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
@varepsilon

@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?

@davidchambers

@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.

@mandrei99

You need to place an empty option before all options:

@magicsky

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.

@tomerz012

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

@sathishbabu007

I am also facing same issue..

@grimurd

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.

@rvinay88

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