option de sélection par défaut comme vide

Question

J'ai une exigence très étrange, dans laquelle je dois faire en sorte qu'aucune option ne soit sélectionnée par défaut dans un menu déroulant en HTML. Cependant,

Je ne peux pas l'utiliser,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Car, pour cela, je devrai faire une validation pour gérer la première option. Quelqu'un peut-il m'aider à atteindre cet objectif sans inclure la première option dans la balise select ?

Answer 1

En react, vous pouvez donner une valeur fictive (disons -1) avec la balise select comme ci-dessous et la même valeur peut être utilisée avec votre option désactivée. (CELA A FONCTIONNÉ POUR MOI)

const nonEmpty = selected[identifierField] || false;

<select
    onChange={(e) => {
      onSelect(
        options.find((option) => option[identifierField] === e.target.value)
      );
    }}
    value={nonEmpty || -1}
  >
    <option disabled value={-1}>Select Option</option>
    {options.map((option) => (
      <option key={option[identifierField]} value={option[identifierField]}>
        {option[displayField]}
      </option>
    ))}
  </select>

Answer 2

Essayez ça :

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Valide en HTML5. Fonctionne avec required dans l'élément sélectionné. Can être re-sélectionné. Fonctionne dans Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.