jQuery et select

Version imprimable

jQuery et select

Bonjour,

Je pense que le sujet a été abordé mais je n'ai pas trouvé de réponse jusqu'à présent.
Au chargement d'une page, je remplis un select (par un d'ajax).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $(document).ready(function(){ var $Themes = $('#Themes'); var themelu; listeThemes($Themes,"w"); $("#Themes.option[1]").selected = true; themelu=$("#Themes").find('option:selected').val(); alert(themelu); function listeThemes(balise,espace){ $.ajax({ url: './ajax/ListeThemes.php', data: 'espace='+espace, dataType: 'html', success: function(response){ balise.html(response); } }); }; });
Je voudrais que le 2eme élément de la liste des options soit "selected" ($("#Themes.option[1]").selected = true; ) et que je puisse ensuite récupérer sa valeur.
Mais l'option n'est pas sélectionnée et donc le script ne retourne pas de valeur.
Merci de votre aide.

Luc

11/03/2013, 11h16
Bovino

Code:

$("#Themes.option[1]")

Je ne suis pas sûr que ton sélecteur soit correct...
Tu as bien une balise avec l'id "Themes" et une classe valant "option[1]" ? :whistle:

D'autre part, un sélecteur jQuery renvoie un objet jQuery qui n'est pas le même que l'élément DOM associé, donc un objet jQuery ne possède pas de propriété disabled.
11/03/2013, 11h24
Luc_Dal

Merci pour la réponse
Oui aux deux questions.
Comment alors récupérer dans le DOM l'objet en question ?
11/03/2013, 11h28
Bovino

Tout d'abord, étant donné qu'un id doit être unique dans la page, il est inutile (et moins performant) de cibler un élément par son id et sa classe...

Sinon, regarde du côté de .get() ou plus simplement $(selecteur)[0] pour récupérer l'objet DOM.
11/03/2013, 12h04
Luc_Dal
Merci pour la réponse
L'objet ne semble pas encore être présent dans le DOM :
Code:

1 2 themelu=$("#Themes")[0]; alert(themelu.options.length);
me donne domme résultat 0 ...
Help ....
11/03/2013, 13h34
Bovino

Sans connaitre le code HTML associé, répondre à ta question relève plus de l'art prophétique ou de la divination...

De fait ...

Voici le code après quelques modifications :

Page HTML

Code:

1
2
3
4
5
6
7
<body>
<div id="tabThemes">
  <div>Themes</div>
  <select size="10" id="Themes" name="Themes">
  </select>
</div>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
	var theme;
	var $Themes = $('#Themes');
	listeThemes($Themes,"w");
	theme=$("#Themes").get(0);
	alert("Coucou");
	theme[1].selected=true;
	alert( $("#Themes option:selected").val());
 
////////////
function listeThemes(balise,espace){
    $.ajax({
        url: './ajax/ListeThemes.php',
        data: 'espace='+espace,
        dataType: 'html',
        success: function(response){
			balise.html(response);
        	}
    	});
	};
});

Ce code fonctionne parfaitement à condition d'insérer alert("Coucou");Si on supprime cette alert, le script se plante ...
Merci de ton aide
Luc

11/03/2013, 18h36
Bovino

Un peu de lecture : Un classique AJAX : utiliser les données au bon moment !
11/03/2013, 18h52
Luc_Dal

Merci pour l'info ...
Je souffre du mal du siècle : trop pressé
Bonne soirée,

Luc

Problème résolu en appelant la méthode synchrone

Code:

1
2
3
4
5
6
7
8
9
10
11
function trucmuch(balise,URL){
var xhr = new XMLHttpRequest();
var elem=document.getElementById(balise);
	xhr.onreadystatechange = function(){ 
	if(xhr.readyState == 1){elem.innerHTML = 'Chargement ...';}
	if(xhr.readyState == 4 && xhr.status == 200){
		elem.innerHTML=xhr.responseText;} 
	};
	xhr.open('POST',URL,false) 
	xhr.send();
};

Merci pour l'aide