Comment puis-je cacher la valeur par défaut & lt; sélectionnez & gt; & lt; option & gt; lorsque le menu déroulant est cliqué?

Je veux avoir un <select> élément par défaut de l'option choisie est "____". En d'autres mots, vide.

Lorsque la liste déroulante est concentré, je veux de l' "____" l'option de ne pas être dans les options qui peuvent être sélectionnées. De cette façon, l'utilisateur dispose de choisir autre chose que "____" en tant que leur option.

Cela fait-il sens?

Illustrations

Fermé:

Comment puis-je cacher la valeur par défaut & lt; sélectionnez & gt; & lt; option & gt; lorsque le menu déroulant est cliqué?

Ouvert:

Comment puis-je cacher la valeur par défaut & lt; sélectionnez & gt; & lt; option & gt; lorsque le menu déroulant est cliqué?

Comme vous pouvez le voir, l'option "___" n'est pas dans la liste quand il est sélectionné. C'est mon résultat final souhaité.

J'ai essayé d'utiliser onFocus événements à supprimer des options, mais juste unfocuses l'élément, et remplace l'option par défaut avec un autre.

source d'informationauteur God is good

  1. 8

    Pour masquer l'option par défaut, permettant aux autres de le montrer, il existe quelques façons de le faire.

    Malheureusement, vous ne pouvez pas l'option masquer les éléments dans tous les navigateurs. Encore une fois, display:none; ne fonctionne pas dans tous les navigateurs sur options ...

    Dans le passé, lorsque j'ai eu besoin de le faire, j'ai mis leur désactivé attribut, comme si...

    $('option').prop('disabled', true);

    J'ai ensuite utilisé la cachette où il est pris en charge dans les navigateurs à l'aide de cette pièce de CSS...

    select option[disabled] {
    display: none;
}
  2. 6

    Vous pouvez tirer parti de la hidden attribut HTML. Essayez avec cette exemple

    <select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

    Cochez cette violon ou les captures d'écran ci-dessous.

    Avant de cliquer sur:
    Comment puis-je cacher la valeur par défaut & lt; sélectionnez & gt; & lt; option & gt; lorsque le menu déroulant est cliqué?

    Après avoir cliqué sur:
    Comment puis-je cacher la valeur par défaut & lt; sélectionnez & gt; & lt; option & gt; lorsque le menu déroulant est cliqué?

  3. 3

    CSS est votre ami, ensemble display:none pour l'option que vous souhaitez masquer.

    <select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

    Voici un extra avec jQuery qui va assurer la première option de sélectionner qui est invisible:

    $('select:first-child').css({display:none;});