web-dev-qa-db-fra.com

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

Je suis novice en HTML et PHP et je souhaite un menu déroulant à partir de la table mysql et codé en dur. J'ai plusieurs sélections dans ma page, l'un d'eux 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 marquage" comme marquage, mais je veux seulement lui fournir le choix parmi les 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, "Option A" est devenue la valeur par défaut. Donc, je veux définir "Choisir le marquage" comme par défaut et je veux également le désactiver de la sélection. Est-ce une façon de faire cela? La même chose doit être faite avec une autre sélection qui récupérera les données de Mysql. Toute suggestion sera appréciable.

htmlhtml-select
107
Ankit Sharma

utilisation

<option selected="true" disabled="disabled">Choose Tagging</option>
233
Cris

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

<option selected disabled>Choose Tagging</option>
16
Pradeep Kumar Prabaharan

Je sais que vous demandez comment désactiver cette option, mais j’imagine que le résultat visuel de l’utilisateur final est identique à celui de cette solution, même s’il est probablement légèrement moins exigeant en 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>
9
Mandrake

Electron + React Laissez vos deux premières options ressembler à ça

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

Premier à afficher à la fermeture Second à afficher à l'ouverture de la liste

5
Benjamin

Une autre solution de balise SELECT pour ceux qui veulent 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>
4
CodeGeass
 selected disabled="true"

Utilisez ceci. Cela fonctionnera dans les nouveaux navigateurs

3
Ronak Bokaria

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>
2
Siddharth Shukla

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 toutefois le masquer dans les options alors qu'il est affiché par défaut.

jsfiddle

2
Thielicious

Si vous utilisez jQuery pour remplir votre élément select, 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 sous la forme d'un en-tête désactivé ("Choisir le marquage") et de sélectionner toutes les autres options.

enter image description here

1
Cybernetic

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 la sélection d'une autre: tout d'abord, attribuez à l'élément un identifiant comme suit:

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

et l'option un identifiant:

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

ensuite:

<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; }
}
0
S_UMan