L'accès aux éléments de type SELECT

Signaler
Messages postés
43
Date d'inscription
samedi 10 juillet 2010
Statut
Membre
Dernière intervention
18 juin 2016
-
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
-
Bonjour,

j'ai un petit souci avec la recuperation de l' index des éléments d'un select en utilisant l'evenement onchange avec la methode suivante :

document.forms['form_name'].elements['name_select'].selectedIndex

mais quand je mis mon code de la facon ci-dessous ,ca marche nikel :

this.form.elements['name_select'].selectedIndex

mon souci est que cette ligne serra utilisée en dehors du formulaire,donc this.form ne marchera pas.

NB : j'utilise chrome comme navigateur.

j'attend vos proposition

merci d'avance.

1 réponse

Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
12
Salut,

Je te recommanderais de faire tout ceci autrement. Au lieux de t'embêter à naviguer dans le formulaire, repère donc l'élément avec un id (ou autre), c'est carrément plus simple. Une fois l'élément repéré, tu peux lui associer une fonction avec un évènement afin de faire ce que tu veux. Bref, le onchange dans le html on oublie. Voici quelques petits exemples :

Avec jQuery :
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  </head>
  
    

      <form method="get" action="">
<select name="foo" id="foo">
  <option value="toto">Toto</option>
  <option value="titi">Titi</option>
  <option value="tata">Tata</option>
</select>
      <form>
    


    <script type="text/javascript">
      $(document).ready(function () {
  $('#foo').change(function() {
      alert('New value: ' + $(this).val());
  });
      });
    </script>
  
</html>


Sans jQuery :
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
  </head>
  
    

      <form method="get" action="">
<select name="foo" id="foo">
  <option value="toto">Toto</option>
  <option value="titi">Titi</option>
  <option value="tata">Tata</option>
</select>
      <form>
    


    <script type="text/javascript">
    (function() {
var sel = document.getElementById('foo');

if (sel !== null) {
    sel.addEventListener('change', function() {
alert('New value: ' + this.value);
    }, false);
} else {
    console.error(sel);
}
    })();
    </script>
  
</html>