Supprimer une option d'un champ select si cette option est déjà égale a la valeur de ce champ

Version imprimable

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:

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 ?

31/03/2016, 19h02
NoSmoking

Bonjour,
à lire Les champs des formulaires, c'est dans la :faq:
31/03/2016, 22h25
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
01/04/2016, 08h33
SpaceFrog

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

voir removeChild() ...
01/04/2016, 10h50
Invité
Bonjour,
Code:

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... :aie:

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

Ou on utilise jQuery.

En JavaScript pur :

Code:

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:

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:

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:

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'});
        }
     });
  });
});

01/04/2016, 12h37
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