Allow options with no value

Hey, I want to use an option with no value as a placeholder. But this doesn’t work. The option will not be visible with choices.js.

<select>
  <option value selected>Please Choose…</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

The select is empty and I’m not able to select this field anymore.

This is valid HTML so I’m a bit confused why this isn’t working.

[philippkuehn]

That’s a tough question. I think you always have to think about accessibility. Custom selects should work 100% if I drop all the javascript stuff.

So what I want is a javascript and non-javascript solution to:

• have a placeholder with no value
• after selecting some value I want to be able to re-select the placeholder value (for non-required selects)

So maybe you don’t have to change the way choices works with empty values, if the placeholder options works properly. In #53 there is a nice suggestion to fix the current issue with the placeholder option:

const choices = new Choices(elements, {
    placeholderValue: 'Please Choose…',
    searchPlaceholderValue: 'Search…',
    removeItemButton: true,
}

Or maybe you could do something like this to recognize a placeholder option (the placeholder should not be in the dropdown):

<select>
  <option value data-choices-placeholder>Please Choose…</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

In general I don’t think it’s a good idea that placeholder items behave like disabled fields because not all selects are required fields and otherwise you are not able to un-select an already selected field.

What do you think? 🤔

[jshjohnson]

Hi all!

As of version 3.0.0, Choices now supports setting an option with no value as a placeholder (info here) as well as a searchPlaceholderValue config option!

Sorry for the long wait 🙈

Thanks for your help