How can I make the display and the value different for a html form datalist option? [duplicate]

StackOverflow https://stackoverflow.com/questions/8461347

  •  13-03-2021
  •  | 
  •  

Question

How can I make the display and the value different for an html form datalist option?

For instance, for a select-option field, I can write: <option value="Fake">Sample</option> where "Sample" is displayed, but "Fake" is the value posted.

For a datalist, <option value="Sample" />, "Sample" is both displayed and used as the posted value.

How can I make it so I can post a different value from Sample in a datalist? Thanks!

I need this so I can dynamically populate the datalist from MySQL, displaying a name while using an ID, for example <option value="2">Bob</option> (if this were a select-option field instead of a database field).

I discovered that I could use <option value="Fake" label="Sample"/>, which will hide it in Firefox, but Opera still displays both the Value and the Label. Anyone have any further ideas to display Sample, but hide Fake?

Was it helpful?

Solution

Seems you can't with pure HTML without using some JS+CSS help.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top