standardmäßig Option als leer auswählen

Question

Ich habe eine sehr seltsame Anforderung, bei der ich keine Option standardmäßig im Dropdown-Menü in HTML ausgewählt haben muss. Jedoch,

Ich kann das nicht verwenden,

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

Denn dafür muss ich eine Validierung durchführen, um die erste Option zu behandeln. Kann mir jemand helfen, dieses Ziel zu erreichen, ohne tatsächlich die erste Option als Teil des Select-Tags aufzunehmen?

Answer 1

Ich benutze Laravel 5 Framework und @Gambi `s Antwort arbeitete für mich auch, aber mit einigen Änderungen für mein Projekt.

Ich habe die Optionswerte in einer Datenbanktabelle und verwende sie mit einer foreach-Anweisung. Aber vor der Anweisung habe ich eine Option mit den von @Gambit vorgeschlagenen Einstellungen hinzugefügt und es hat funktioniert.

Hier mein Beispiel:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset 

Ich hoffe, das hilft auch jemandem. Machen Sie weiter so!

Answer 2

Wenn Sie zunächst keine leere Option benötigen, versuchen Sie diese erste Zeile:

    <option style="display:none"></option>

Answer 3

Verwenden Sie einfach " option hidden selected " als Standardoption

Answer 4

Ich schätze, eine gute Idee wäre, die Optionsfelder zu verwenden, #1 als Standard einzustellen und es auszublenden, ihm zum Beispiel einen name="init" und eine value="null" oder was auch immer, bleibt Ihnen überlassen!

Auf diese Weise hat die Liste der Optionsfelder definitiv einen Wert, aber der Standardwert Null kann logischerweise verwendet werden!

Ich denke, dass es nicht notwendig ist, dies weiter auszuführen, da die Idee leicht umgesetzt werden kann mit display: none; o visibility: hidden;

... wohingegen ich denke, dass der erste display: none; ist die bessere Option:

Answer 5

In React können Sie einen Dummy-Wert (sagen wir -1) mit Select-Tag wie unten und den gleichen Wert kann mit dieser deaktivierten Option von Ihnen verwendet werden. (FUNKTIONIERTE BEI MIR)

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>