Discussion :

[serigne]

Bonjour,

J'ai un champ Select en html et je veux des que la valeur de ce champ Select est égale a l'une des options,cette option n’apparaîtra pas sur la liste des options

voici mon code mais ça marche pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<label for="service_id">Etat bon  :</label><select id="bon_etat"><option value="<?= $statebon?>" onclick="enlever_select(this.value);"><?= $etat_bon?></option>
 <option value="0">en attente</option>
 <option value="1">en cours</option>
 <option value="2">deja fait</option>
 <br /></select><br />
 
<script type="text/javascript" >
 function enlever_select (a)
 
 {
 
 var monSelect = document.getElementById("bon_etat");
 var longeur = monSelect.length;
 for(var i=o;i++;i<longeur)
 
     {
 
         if ( monSelect.options[i]==a)
 
         {
 
     document.form.monSelect [i] = null;
 
         }
 
     }
 
 }
 
</script>

Je veux par-exemple ici si au chargement le champ est égal á "en attente", quand l'utilisateur cliquera sur la flèche du champ Select pour choisir une autre valeur, l'option "en attente" sera verra être supprimé

Si vous avez des solutions ?

[NoSmoking]

Bonjour,
à lire Les champs des formulaires, c'est dans la

[serigne]

Bonjour,

bon j'ai consulte la faq mais en vain
Ce qu'il me faut c'est parcourir les options du select par une boucle et des l'instatnt que je rencontre une option égale a la valeur, je supprime cette option de la liste

[SpaceFrog]

une affectation de null ne supprime pas l'objet du DOM...

voir removeChild() ...

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<label for="service_id">Etat bon  :</label><select id="bon_etat"><option value="<?= $statebon?>" onclick="enlever_select(this.value);"><?= $etat_bon?></option>
...
...
...
 <br /></select><br />

Quand on voit la tronche du HTML, on a de quoi être inquiet...

Il s'agit d'un select : on met l'action onchange="..." sur le <select>, pas onclick sur <option>.

Ou on utilise jQuery.

[Invité]

En JavaScript pur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<label for="bon_etat">Etat bon  :</label>
<select id="bon_etat" onchange="hide_selected_option( this.id );">
   <option value="0">en attente</option>
   <option value="1">en cours</option>
   <option value="2">déjà fait</option>
</select>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function hide_selected_option(id) {
  var thisId = document.getElementById(id);
  var selValue = thisId.selectedIndex;
  var optNbre = thisId.options.length;
 
  for (var i = 0; i < optNbre; i++) {
    if (thisId.options[i].value == selValue) {
      thisId.options[i].style.display = 'none';
    } else {
      thisId.options[i].style.display = 'block';
    }
  }
}

En jQuery :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<label for="bon_etat">Etat bon  :</label>
<select id="bon_etat" class="hide_selected_option">
 <option value="0">en attente</option>
 <option value="1">en cours</option>
 <option value="2">deja fait</option>
</select>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$('select.hide_selected_option').each( function(){
  $(this).on( 'change', function(){
    var selValue = $(this).val();
    $(this).find('option').each( function(){
      if ( $(this).attr('value')==selValue )
        {
          $(this).css({'display':'none'});
        } else {
          $(this).css({'display':'block'});
        }
     });
  });
});

[serigne]

Bonjour

Merci pour la réponse

Bon je vais tester pour voir.

En fait je m’étais rabattu finalement je suis passe par une table au niveau base de données et faire une requête sql qui exclut la valeur en cours du champ select

et ça marche