append et liste déroulante ajax

Version imprimable

1 pièce(s) jointe(s)

Bonsoir à tous :D,

Actuellement en stage, je me retrouve confronté souvent au même pb. En effet, lorsque je créais des listes déroulantes via jquery, le contenu s'affiche à côté et non dans celle-ci ... J'ai jusqu'à maintenant réussi à me débrouiller en déplaçant les lignes de codes concernées jusqu'au fonctionnement voulu mais aujourd'hui, je suis au pied du mur ...

Petit image d'exemple :
Pièce jointe 152062

Le code Jquery qui pose problème :

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
31
32
33
34
if(/^ref_animal\d+$/.test(table)){
	//la sélection fait parti de la liste animal
	$("#zone_espece"+num+"").html(""); //mise à zéro de la zone
	$.ajax({
		url: 'recupXml.php',
		data: { match: animal, fichier: 'animal' },
		dataType: 'json',
		success: function(json) {
			if(json!=null){
				table = json.affectation; //récupération de la table à afficher dans la liste
				if(table != ''){
					//début problème
					$("#zone_espece"+num+"").append("<select class='inputform' name='aff_espece"+num+"' id='aff_espece"+num+"'>");
					$("#zone_espece"+num+"").append("<option value=''>Non renseigné</option>");
					$("#zone_espece"+num+"").append("<optgroup label='"+table+"'>");
					//récupération des informations de la table
					$.ajax({
						url: 'getFacture.php',
						data: 'nom_table='+table,
						dataType: 'json',
						success: function(json) {
							$.each(json, function(index, value) {
								$("#zone_espece"+num+"").append('<option value="'+table+ index +'">'+ value +'</option>');
							});
						}
					});
					$("#zone_espece"+num+"").append("</optgroup>");
					$("#zone_espece"+num+"").append("</select>");
					//fin problème
				}
			}
		}
	});
}

Merci d'avance pour votre aide :)

Bonsoir

C'est un problème de conception, les options doivent être ajoutées au "select".

Comme je ne peux rien faire avec votre extrait de code, voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
<table>
    <tbody>
        <tr>
            <td id="zone_espece41">Hello !</td>
            <td id="zone_espece42">Hello !</td>
            <td id="zone_espece43">Hello !</td>
        </tr>
    </tbody>
</table>

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
var num = 42,
    jObjZone = $( "#zone_espece" + num ),
    genre = "Mamifère";
 
jObjZone.empty();
 
var jObjSelect = $( "<select/>", {
    "class" : "inputform",
    "name" : "aff_espece" + num,
    "id" : "aff_espece" + num,
    "html" : '<option value="">Non renseigné</option><optgroup label="' + genre + '">',
    "change" : function( event ){
        // console, touche F12
        console.clear()
        console.log( $( this ).val(), "\n", $( "option:selected", this ).text(), "\n", event );
    }
});
 
var mammal = [ "Baleine", "Lapin" ];
 
$.each( mammal, function( i, item ){
    jObjSelect.append( '<option value="' + genre + i + '">' + item + '</option>' );
});
 
jObjSelect.append( '</optgroup>' );
 
jObjZone.append( jObjSelect );

26/07/2014, 23h49
LuckyMajor

Problème résolu ...

Merci beaucoup pour ta réponse ! Tu as effectivement raison :) J'ai remarqué au moment de la correction que j'avais fait le traitement de façon correcte à un autre endroit et que j'ai oublié de jeter un oeil dessus pour m'aider vu que la logique était similaire >< Merci la fatigue :P
Bon, c'est en faisant des erreurs qu'on apprend, donc je pense que là, je suis au point sur l'utilisation d'append :D
Encore merci. Je mets en résolu ;)