Recuperer la valeur d'une combobox

Signaler
Messages postés
22
Date d'inscription
lundi 18 octobre 2004
Statut
Membre
Dernière intervention
4 juin 2007
-
Messages postés
5
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
31 janvier 2008
-
Bonjour, une question toute bète (j'ai même honte de la poser) :

J'ai une combobox, dont je veux envoyer la valeur d'index du champ selectionné
à une fonction javascript. Voici mon code 

<SELECT name="personnel2" style="FONT-SIZE: xx-small; HEIGHT: 17px" onchange="traitement(this.SelectedIndex)">
   <OPTION selected> </OPTION> 
   <OPTION value="Finances">finances</OPTION>  
   <OPTION value="Moyens généraux">Moyens généraux</OPTION> 
   <OPTION value="Division instruction">Division instruction</OPTION>
</SELECT> 

Lorsque je fais afficher la valeur envoyée a la fonction le résultat est : Undefined

Merci de m'aider.

maleo83

8 réponses

Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
je redirige sur javascriptfr.com

<hr />Cyril - MSP - MCTS ASP.net & SQL
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Bonjour la réponse toute bête ;o)

Il faut mettre selectedIndex et non pas S
electedIndex
( et hop ... magique )
les propriétés commencent toujours par des minuscules.

[o-_-o]
Messages postés
5
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
31 janvier 2008

Bonjour,
J'ai beaucoup cherché sur le site avant de poser la question, mais comme je débute en Javascript, j'ai probablement dû mal chercher... désolé...

Voici mon p'tit problème :

J'ai une liste de noms de départements dans une liste de formulaire. La valeur de chaque option de la liste c'est le numéro du département. Le texte affiché pour chaque département est le nom du département.

Dans un champ au dessus de cette liste, l'utilisateur indique son code postal.
Je voudrais pouvoir modifier dynamique le 'selected' de la liste des départements une fois que je connais le numéro de ce département, histoire que la liste soit déjà sélectionné sur le bon département une fois le code postal connu.

Je n'ai trouvé que la manière de modifier l'élément sélectionné de la liste par rapport à son numéro d'index, et non par rapport à la valeur de l'option.

Voici le malheureux bout de code que j'ai réussi à pondre. Je suis confondu de honte :

function ChoixDepartement()
{
 var cp = document.getElementById('cp').value;
 var num_depart = cp.substring(0,2);
 num_depart = parseInt(num_depart);
 //alert(num_depart);
 document.form1.id_departements.options[num_depart].selected=true;
 
}

Bien sûr, j'ai mis un onchange=ChoixDepartement()" sur le champ qui déclenche la fonction. Dans l'exemple du dessus, j'arrive bien à récupérer la bonne valeur dans num_depart, mais comme il correspond pas à l'option...

Je vais m'acheter un bon bouquin sur Javascript, histoire de ne plus poser de questions aussi nulles, mais bon... si une bonne âme pouvait m'aiguiller, cela serait sympa.

A+
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Salut,
Tu n'as pas avoir honte de ton code, il est sympa et en plus tout bleu...
ceci te conviendrait-il mieux ?
<html>
    <head>
        <title>
        </title>
        <script>
        function ChoixDepartement(_obj)
            {
             var cp = _obj.value;
             if ( cp != null){
                 var num_depart = cp.substring(0,2);
                 num_depart = parseInt(num_depart);
                 var myCombo = document.getElementById('myCombo');
                 if ( num_depart-1 < myCombo.options.length)
                     myCombo.options[num_depart-1].selected=true;
            }
             
            }
        </script>
    </head>
   
       
        <select id="myCombo">
            <option value="01">Ain</option>
            <option value="02">Aines</option>
            <option value="03">Allier</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
        </select>
   
</html>

désolé pour les départements ça me gonflait de tous me les taper ;o)

[o-_-o]
Messages postés
5
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
31 janvier 2008

Un grand merci, Zobibol : ton code m'a enfin permis de trouver le problème.
J'ai testé ce que tu m'as envoyé (super sympa de m'avoir consacré du temps) et pourtant cela ne marchait pas tout le temps.
C'est le "tout le temps" qui m'a fait comprendre. Parce qu'un programme, hein, ça marche ou ça marche pas.

Figure-toi que nos braves dirigeants (qui ne se soucient guère du sort des pôvres programmeurs) on sucré tout bonnement le département n° 20. A la place, on a droit au 2A et au 2B pour la Corse. Faut toujours qu'ils se distinguent, ceux-là ;-)

Du coup, la recherche par indice se trompe au dessus de 19 (vu qu'on saute direct au 21...), puis de nouveau au dessus de 29 (dans un classement par numéro de département, le 2A arrive après le 29).

J'ai corrigé mon code en conséquence. Et pour ceux qui souhaitent récupérer la liste des départements (avant qu'Attali ne fasse tout pêter...), la voici, la voilà :

function ChoixDepartement(_obj)
{
 
 var cp = _obj.value;
 
 if ( cp != null)
 {
  var num_depart = cp.substring(0,2);
  num_depart = parseInt(num_depart);
  alert(num_depart);
  var id_departements = document.getElementById('id_departements');
  if ( num_depart-1 < id_departements.options.length)
  {
   if(num_depart>19 && num_depart<29) num_depart=num_depart-1;
   if(num_depart>29) num_depart=num_depart+1;
   id_departements.options[num_depart].selected=true;
  }
 }
 
}

<option value="">Faites un choix</option>
<option value="01">Ain</option>
<option value="02">Aisne</option>
<option value="03">Allier</option>

<option value="04">Alpes de Haute-Provence</option>
<option value="05">Hautes-Alpes</option>
<option value="06">Alpes-Maritimes</option>
<option value="07">Ardêche</option>
<option value="08">Ardennes</option>
<option value="09">Ariège</option>

<option value="10">Aube</option>
<option value="11">Aude</option>
<option value="12">Aveyron</option>
<option value="13">Bouches-du-Rhône</option>
<option value="14">Calvados</option>
<option value="15">Cantal</option>

<option value="16">Charente</option>
<option value="17">Charente-Maritime</option>
<option value="18">Cher</option>
<option value="19">Corrèze</option>
<option value="21">Côte-d'Or</option>
<option value="22">Côtes d'Armor</option>

<option value="23">Creuse</option>
<option value="24">Dordogne</option>
<option value="25">Doubs</option>
<option value="26">Drôme</option>
<option value="27">Eure</option>
<option value="28">Eure-et-Loir</option>

<option value="29">Finistère</option>
<option value="2A">Corse-du-Sud</option>
<option value="2B">Haute-Corse</option>
<option value="30">Gard</option>
<option value="31">Haute-Garonne</option>
<option value="32">Gers</option>

<option value="33">Gironde</option>
<option value="34">Hérault</option>
<option value="35">Île-et-Vilaine</option>
<option value="36">Indre</option>
<option value="37">Indre-et-Loire</option>
<option value="38">Isère</option>

<option value="39">Jura</option>
<option value="40">Landes</option>
<option value="41">Loir-et-Cher</option>
<option value="42">Loire</option>
<option value="43">Haute-Loire</option>
<option value="44">Loire-Atlantique</option>

<option value="45">Loiret</option>
<option value="46">Lot</option>
<option value="47">Lot-et-Garonne</option>
<option value="48">Lozère</option>
<option value="49">Maine-et-Loire</option>
<option value="50">Manche</option>

<option value="51">Marne</option>
<option value="52">Haute-Marne</option>
<option value="53">Mayenne</option>
<option value="54">Meurthe-et-Moselle</option>
<option value="55">Meuse</option>
<option value="56">Morbihan</option>

<option value="57">Moselle</option>
<option value="58">Nièvre</option>
<option value="59">Nord</option>
<option value="60">Oise</option>
<option value="61">Orne</option>
<option value="62">Pas-de-Calais</option>

<option value="63">Puy-de-Dôme</option>
<option value="64">Pyrénées-Atlantiques</option>
<option value="65">Hautes-Pyrénées</option>
<option value="66">Pyrénées-Orientales</option>
<option value="67">Bas-Rhin</option>
<option value="68">Haut-Rhin</option>

<option value="69">Rhône</option>
<option value="70">Haute-Saône</option>
<option value="71">Saône-et-Loire</option>
<option value="72">Sarthe</option>
<option value="73">Savoie</option>
<option value="74">Haute-Savoie</option>

<option value="75">Paris</option>
<option value="76">Seine-Maritime</option>
<option value="77">Seine-et-Marne</option>
<option value="78">Yvelines</option>
<option value="79">Deux-Sèvres</option>
<option value="80">Somme</option>

<option value="81">Tarn</option>
<option value="82">Tarn-et-Garonne</option>
<option value="83">Var</option>
<option value="84">Vaucluse</option>
<option value="85">Vendée</option>
<option value="86">Vienne</option>

<option value="87">Haute-Vienne</option>
<option value="88">Vosges</option>
<option value="89">Yonne</option>
<option value="90">Territoire-de-Belfort</option>
<option value="91">Essonne</option>
<option value="92">Hauts-de-Seine</option>

<option value="93">Seine-Saint-Denis</option>
<option value="94">Val-de-Marne</option>
<option value="95">Val-d'Oise</option>
<option value="971">Guadeloupe</option>
<option value="972">Martinique</option>
<option value="973">Guyane</option>

<option value="974">La Réunion</option>

(Faudra que je corrige aussi pour les DOM-TOM...)
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Si je puis me permettre une nouvelle modification qui fera que terminé les problèmes de la corse (enfin, si  je puis dire) et des dom-Tom:
        function ChoixDepartement(_obj)
            {
             var cp = _obj.value;
             if ( cp != null){
                 var num_depart = cp.substring(0,2);
                 var myCombo = document.getElementById('myCombo');
                 var l = myCombo.options.length;
                // Parcours la liste des options
                 for (var i=0; i < l; i++){
                         // Si la valeur de l'option est identique au numéro du département alors on selectionne et s
                         if ( myCombo.options[i].value == num_depart){
                             myCombo.options[i].selected=true;
                             break;
                         }
                 }
            }
        }
ne serais-ce point plus propre ?

[o-_-o]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Et je remets l'couvert ;o)
        function ChoixDepartement(_obj)
            {
             var cp = _obj.value;
             if ( cp != null){
                 var dep = cp.substring(0,2);
                 var dtdep =cp.substring(0,3);
                 var myCombo = document.getElementById('myCombo');
                 var l = myCombo.options.length;
                 for (var i=0; i < l; i++){
                         var val =  myCombo.options[i].value;                         if ( valdep || val dtdep){
                             myCombo.options[i].selected=true;
                             break;
                         }
                 }
            }
        }
et voilà maitenant tu prends en compte tous les départements ( outre mer, corse...)

[o-_-o]
Messages postés
5
Date d'inscription
jeudi 22 novembre 2007
Statut
Membre
Dernière intervention
31 janvier 2008

Alors, là, chapeau...

J'espère que cette fonction servira à beaucoup, car j'avais rien trouvé sur le web, et pourtant j'ai fait chauffer le père Google.

 SUPER et UN GRAND MERCI !!!