Comment afficher l'option de sélection de désactivation HTML par défaut?

139

Je suis nouveau en HTML et PHP et je souhaite créer un menu déroulant à partir de la table mysql et également codé en dur. J'ai plusieurs sélections dans ma page, l'une d'elles est

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Le problème est maintenant que l'utilisateur peut également sélectionner "Choisir le balisage" comme son balisage, mais je veux seulement lui proposer de choisir parmi trois disponibles. J'ai utilisé désactiver comme

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Mais maintenant, «l'option A» est devenue l'option par défaut. Je veux donc définir "Choisir le balisage" par défaut et également le désactiver de la sélection. Est-ce une façon de faire cela. La même chose doit être faite avec un autre select qui récupérera les données de Mysql. Toute suggestion sera appréciable.

Ankit Sharma
la source
que diriez-vous d'ajouter un événement de clic sur la sélection pour désactiver la première option.
David Blacksmith
Vous devez corriger une erreur de syntaxe - value = "" disabled devrait être désactivé = "disabled" + supprimer les balises de fermeture impaires </select>
Evgeniy
@Evgeniy oups que </select> appartient à une autre partie de mon code
Ankit Sharma
@AnkitSharma j'ai modifié votre code - vous aviez </select><select> <option> ... <option> </select>
Evgeniy
@Evgeniy thanx ..... </select> a été copié de mon code par erreur.
Ankit Sharma le

Réponses:

291

utilisation

<option selected="true" disabled="disabled">Choose Tagging</option>    
Cris
la source
42
Vous n'avez pas besoin de mettre les valeurs trueou disabled. vous pouvez obtenir en faisant<option selected disabled>Choose Tagging</option>
Sam Eaton
18
@ SamEaton, il fait juste que le code suive la syntaxe XHTML valide, sinon en HTML5 vous pouvez le négliger.
Cris
1
Vous devez définir la valeur = "" donc si vous avez également requis, une erreur sera générée pour choisir dans la liste déroulante, sinon une valeur vide est transmise même si rien n'a été sélectionné. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612 le
27

Dans HTML5, pour sélectionner une option désactivée:

<option selected disabled>Choose Tagging</option>
Pradeep Kumar Prabaharan
la source
10

Je sais que vous demandez comment désactiver l'option, mais je pense que le résultat visuel de l'utilisateur final est le même avec cette solution, même si elle demande probablement un peu moins de ressources.

Utilisez la balise optgroup , comme ceci:

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>
Mandragore
la source
3
Cela ne fonctionne pas, OP doit être sélectionné par défaut jsfiddle.net/tomsihap/5xm7grnb
tomsihap
10

Electron + React Laissez vos deux premières options être comme ça

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

Premier à afficher à la fermeture Deuxième à afficher en premier à l'ouverture de la liste

Benjamin
la source
8

Utilisez hidden.

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

Cela ne le désactive pas mais vous pouvez cependant le masquer dans les options lorsqu'il est affiché par défaut.

Thielicious
la source
6

Une autre solution de balise SELECT pour ceux qui souhaitent garder la première option vide.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

c0degeas
la source
3
 selected disabled="true"

Utilisez ceci. Cela fonctionnera dans les nouveaux navigateurs

Ronak Bokaria
la source
3

nous pouvons désactiver en utilisant cette technique.

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>
Siddharth Shukla
la source
1

Si vous utilisez jQuery pour remplir votre élément de sélection, vous pouvez utiliser ceci:

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

Cela permettra à l'utilisateur de voir la première option comme un en-tête désactivé («Choisir le balisage») et de sélectionner toutes les autres options.

entrez la description de l'image ici

Cybernétique
la source
0
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

utilisez "SELECTED" quelle option vous voulez sélectionner par défaut. Merci

Abdullah Mahi
la source
Ce guide a déjà été publié sur cette question ici: stackoverflow.com/a/42997841/2943403 Votre réponse n'ajoute aucune nouvelle valeur à la page et ne contribue qu'à la gonflement de la page.
mickmackusa
-1

Vous pouvez définir quelle option est sélectionnée par défaut comme ceci:

<option value="" selected>Choose Tagging</option>

Je suggérerais d'utiliser javascript et JQuery pour observer l'événement de clic et désactiver la première option après qu'une autre a été sélectionnée: Tout d'abord, donnez à l'élément un ID comme ceci:

<select id="option_select" name="tagging">

et l'option un identifiant:

<option value="" id="initial">Choose Tagging</option>

puis:

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

Ensuite, vous créez simplement la fonction:

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

S_UMan
la source