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

Question

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

Signaler

yassinozi

Messages postés: 43
Date d'inscription: samedi 10 juillet 2010
Statut: Membre
Dernière intervention: 18 juin 2016

- 23 sept. 2012 à 17:46
TychoBrahe

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

- 24 sept. 2012 à 13:55

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.

Afficher la suite

A voir également:

L'accès aux éléments de type SELECT
Insertion d'un élément dans une liste type select triée - Codes sources - Javascript (Formulaire)
Selectionné un élément dans mon select ✓ - Forum - Javascript / DHTML
Afficher une image dans un champ type select ✓ - Forum - Javascript / DHTML
Tableau des élément de type image ✓ - Forum - Flash
[VC++, ODBC, Access] Requêtes autres que de type SELECT ✓ - Forum - C++ & C++ .NET

1 réponse

Répondre Posez votre question

TychoBrahe · Answer 1 · 2012-09-24T13:55:05+0200

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>

Votre réponse