Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow options with no value

See original GitHub issue

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.

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

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

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:28 (6 by maintainers)

github_iconTop GitHub Comments

philippkuehncommented, Nov 15, 2016

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):

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

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

jshjohnsoncommented, Aug 3, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

is a select option with no value, valid? - Stack Overflow
If I post this, the value would be: city 1, city 2, city 3 and city 4. I don't want to give them...
Read more >
Allow options with no value · Issue #77 · Choices-js ... - GitHub
Hey, I want to use an option with no value as a placeholder. But this doesn't work. The option will not be visible...
Read more >
What Happens When Options Expire? - Investopedia
Holding an option through the expiration date without selling doesn't guarantee profits, but may limit loss. Find out what happens when opens expire....
Read more >
The HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with this method, ......
Read more >
Add a check box control to show Yes/No values
In Access, a Yes/No field stores only two values: Yes or No. If you use a text box to display a Yes/No field,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found