Est-il possible de masquer la première option, c'est-à-dire <option>Select One</option>
lorsque l'utilisateur clique sur la liste déroulante pour voir les options. Le texte Sélectionner un n'apparaît donc pas dans la liste
5 réponses
Comme il n'existe aucun moyen fiable pour tous les navigateurs de masquer les éléments option
, le mieux est de le supprimer sur focus
et de l'ajouter à nouveau sur blur
:
jQuery(document).ready(function () {
var first = jQuery('#myselect').find('option').first();
jQuery('#myselect').on('focus', function (e) {
first.remove();
}).on('blur', function (e) {
jQuery(this).find('option').first().before(first);
});
});
Voici un exemple de travail
Vous pouvez utiliser votre code HTML simple pour masquer le premier élément de l'option lorsque select est ouvert comme:
<select name="list">
<option selected="selected" hidden>First Element</option>
<option>Second Element</option>
<option>Third Element</option>
</select>
Voici le violon de travail: https://jsfiddle.net/sujan_mhrzn/y5kxtkc6/
Si vous souhaitez supprimer l'option, le code simple serait:
var mySelect = document.getElementById('mySelect');
mySelect.onfocus = function() { mySelect.removeChild(mySelect.options[0]); }
Où mySelect
est l'ID de la zone de sélection.
Edit: j'ai changé le code pour ajouter un écouteur d'événement pour l'événement focus. Cependant, ce code supprimera la première option chaque fois que vous sélectionnez la case de sélection. Je suis sûr que ce n'est pas ce dont vous avez besoin. Vous pouvez utiliser onblur pour ajouter à nouveau l'option, mais je ne sais pas si c'est ce dont vous avez besoin. Veuillez clarifier ce que vous voulez faire.
La seule méthode multi-navigateur consiste à le supprimer entièrement. En clair ol 'JS:
var sel = document.getElementById("mySelect");
sel.onfocus = function () {
select.onfocus = null;
sel.removeChild(sel.firstChild);
}
JQuery:
$("#mySelect").focus(function () {
$(this).remove(this.firstChild).unbind(arguments.callee);
});
En tant qu'option CSS rapide, vous pouvez attribuer un identifiant au menu déroulant, puis
#cat option:first-child {
display: none;
}
Ce qui précède utilise #cat comme id pour la liste déroulante
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.