sous menu impossible à faire apparaitre

**pratick** · 20/03/2018, 21h26

Bonjour
d'avance merci pour votre aide
J’ai une architecture qui reseemble avec 2 bases differentes quand je choisie une agences, dans le deuxiemes select j’ai ma base site qui appartient,
Mon soucis est que je voudrait que mon select

Nom : im3.png
Affichages : 153
Taille : 6,0 Ko

Ressemble à ça,mon but et quand je clic sur une agence sa modifie mon deuxieme select

Nom : im2.png
Affichages : 161
Taille : 7,2 Ko

Base agence
catIDagence
nomagence
nom_simpl

1 agence NORD agenceNORD
2 agence SUD Agencesud
3 agence EST Agenceest
4 agence OUEST agenceouest
5 agence CENTRE agencecentre

base sites
IDsites
nomsites nomsites_simpl
catIDagence

1 nord 1 nord 1 1
2 nord 2 nord 2 1
3 nord 3 nord 3 1
4 nord 4 nord 4 1
5 nord 5 nord 5 1
6 nord 6 nord 6 1
7 sud 1 Sud 1 2
8 sud 2 Sud 2 2
9 sud 3 Sud 3 2
10 sud 4 Sud 4 2
11 sud 5 Sud 5 2
12 sud 6 Sud 6 2
13 sud 7 Sud 7 2
14 est 1 est 1 3
15 est 2 est 2 3
16 OUEST 1 OUEST 1 4
17 OUEST 2 OUEST 2 4
18 OUEST 3 OUEST 3 4
19 Centre 1 Centre 2 5

Le fichier php pour le select

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<div id = "Menu" class="tab">
<div id="wrapper">
	<form action='' method='post'>
		<p><label>agence:</label>
      <select name='catIDagence' id='catIDagence'>
	  <div id = "Menu" class="tab">
      <?php
      $stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
      while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
          echo "<option value='$row->catIDagence'>$row->nomagence</option>";
		 }
      ?>
	  </div>
     </select>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
 
 $("#catIDagence").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "change.php",
         data: "catIDagence="+$("#catIDagence").val(),
         success: function(html) {
             $("#IDsites").html(html);
         }
     });
 });
});
</script>

Je met le fichier change.php qui modifie mon deuxieme select

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
<?php
include('config.php');
 
//collecter l'identifiant  id
$id = $_GET['catIDagence'];
 
//exécuter une instruction préparée
$stmt = $conn->query('SELECT IDsites,nomsites FROM tb_sites WHERE catIDagence = '.$conn->quote($id).' ORDER BY nomsites');
 
//faire une boucle à travers toutes les lignes retournées
while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
    echo "<option value='$row->IDsites'>$row->nomsites</option>";
 
}

J’ai tenté sa mais sans succes le selec ne change pas et je ne comprend pas pourquoi mon deuxieme selec ne change pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
 
<div id = "Menu" class="tab">
<div id="wrapper">
 
	<form action='' method='post'>
 
		<p><label>agence:</label>
	  <div id = "Menu" class="tab">
 
     <?php
 
      $stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
      while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
		  echo '<button class="tablinks" onclick="onglet(event,'.$row->catIDagence.')">'.$row->nomagence.'</button>';
 
 
		 }
      ?>
	  </div>
    </p>
 
    <p><label>Sites:</label>
      <select name='IDsites' id='IDsites'></select>
 
	  <p><label>agents:</label>
      <select name='Nom' id='Nom'></select>
	</form>
 
</div>
$(function() {
 
 $("#catIDagence").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "change.php",
         data: "catIDagence="+$("#catIDagence").val(),
         success: function(html) {
             $("#IDsites").html(html);
         }
     });
 });
});
</script>

Encore une fois d'avance merci pour votre aide

Invité · 21/03/2018, 08h50

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
      <select name='catIDagence' id='catIDagence'>
	  <div id = "Menu" class="tab">
...
	  </div>
     </select>

1- On ne met pas de <div> dans un <select>

2- <p> pas fermé...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript">
<script type="text/javascript">

3- Il ne doit en rester qu'un...

Commence déjà par corriger la structure HTML de ton code...

Invité · 21/03/2018, 09h00

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
<div id="Menu" class="tab">
	<div id="wrapper">
		<form action="" method="post">
		<p>
			<label>agence:</label>
			<select name="catIDagence" id="catIDagence">
<?php
			$stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
			while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
			echo "<option value='$row->catIDagence'>$row->nomagence</option>";
			}
?>
			</select>
		</p>
<script>
$(function(){
	$('#catIDagence').on('change', function()
	{
		$.ajax({
			type: 'GET', 
			url: 'change.php',
			data: 'catIDagence='+$('#catIDagence').val(),
			success: function(html) {
				$("#IDsites").html(html);
			}
		});
	});
});
</script>
		<p>
			<label>Sites:</label>
			<select name="IDsites" id="IDsites">
				<option value="">Sélectionnez une Agence...</option>
			</select>
		</p>
...
		</form>
	</div>
</div>

**pratick** · 22/03/2018, 09h43

Bonjour jreaux62
et tous d’abord merci pour ton aide, j'ai fais toutes le correction que tu ma demandé
par contre sa ne résous pas mon problème, j’essaie d'obtenir ça et sans succès
d'avance merci pour ton aide

Nom : im2.png
Affichages : 142
Taille : 7,2 Ko

Fichier index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
44
45
46
 
<div id = "Menu" class="tab">
<!--<div id="wrapper"> -->
 
	<form action="" method="post">
 
		<p><label>agence:</label>
      <select name="catIDagence" id="catIDagence">
<?php
	  $stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
      while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
 
          echo "<option value='$row->catIDagence'>$row->nomagence</option>";
		 }
      ?>
     </select>
 
    </p>
 
<script>	
$(function() {
 
 $("#catIDagence").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "change.php",
         data: "catIDagence="+$("#catIDagence").val(),
         success: function(html) {
             $("#IDsites").html(html);
         }
     });
 });
 
 
});
</script>
    <p><label>Sites:</label>
 
 
      <select name='IDsites' id='IDsites'>
	  <option value="">Sélectionnez une Agence...</option>
	  </select>
 
	</form>
 
</div>

fichier change PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
include('config.php');
 
//collecter l'identifiant  id
$id = $_GET['catIDagence'];
 
//exécuter une instruction préparée
$stmt = $conn->query('SELECT IDsites,nomsites FROM tb_sites WHERE catIDagence = '.$conn->quote($id).' ORDER BY nomsites');
 
//faire une boucle à travers toutes les lignes retournées
while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
    echo "<option value='$row->IDsites'>$row->nomsites</option>";
 
}

Invité · 22/03/2018, 10h27

"obtenir ça" quoi ?
Sois plus précis dans ta demande.

si tu veux que les noms des Agences soient visibles et alignées, alors ce n'est pas un <select> qu'il faut utiliser, mais des boutons radio (par exemple).

N.B. Je t'ai fourni un code "propre" (bien indenté).
Pourquoi tu montres un code avec une indentation moisie ?

**pratick** · 22/03/2018, 11h28

RE, et encore merci

Avant j'avais en HTML des cases qui etait sensible au deplacement de la souris et quand on cliquer dessus un sous menu apparait
mon but et d'obtenir ce meme genre de menu et quand je clic dessu sa déclenche un sous menu, la je voudrait que sa remplie le select "site"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id = "Menu" class="tab">
 
			<button class="tablinks" onclick="onglet(event,'agencecentre')">agence centre</button>
			<button class="tablinks" onclick="onglet(event,'agencenord')">agence nord</button>
			<button class="tablinks" onclick="onglet(event,'agencesud')">agence sud</button>
			<button class="tablinks" onclick="onglet(event,'agenceest')">agence est</button>
			<button class="tablinks" onclick="onglet(event,'agenceouest')">agence ouest</button>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function onglet(evt, libelle) {
    // Declare all variables
    var i, tabcontent, tablinks;
 
 
    // Récupère tous les éléments avec class = "tabcontent" et cache-les
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
 
    // Récupère tous les éléments avec class = "tablinks" et supprime la classe "active"
     tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
 
    // Afficher l'onglet en cours et ajouter une classe "active" au bouton qui a ouvert l'onglet
     document.getElementById(libelle).style.display = "block";
    evt.currentTarget.className += " active";
 
	}

pour information j'ai ranger mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
41
42
43
 
<div id = "Menu" class="tab">
			<div id="wrapper">
				<form action="" method="post">
 
				<p>
						<label>agence:</label>
						<select name="catIDagence" id="catIDagence">
<?php
						$stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
						while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
						echo "<option value='$row->catIDagence'>$row->nomagence</option>";
						}
?>
						</select>
 
				</p>	
 
<script>	
$(function() { 
		$("#catIDagence").bind("change", function() 
		{
				$.ajax({
						type: "GET", 
						url: "change.php",
						data: "catIDagence="+$("#catIDagence").val(),
						success: function(html) {
							$("#IDsites").html(html);
						}
				});
		});			
	});
</script>
				<p>
						<label>Sites:</label>
						<select name='IDsites' id='IDsites'>
								<option value="">Selectionnez une Agence...</option>
						</select>
				</p>
 
	</form>
 
</div>

a+

Invité · 22/03/2018, 11h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
<div id="Menu" class="tab">
	<div id="wrapper">
		<form action="" method="post">
		<p>
			<label>Agence :</label>
<?php
			$stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence');
			while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
			<label><input type="radio" name="catIDagence" value="<?php echo $row->catIDagence; ?>" /> <?php echo $row->nomagence; ?></label> 
<?php
			}
?>
		</p>
<script>
$(function(){
	$('input[name=catIDagence]').on('click', function()
	{
		$.ajax({
			type: 'GET', 
			url: 'change.php',
			data: 'catIDagence='+$(this).val(),
			success: function(html) {
				$("#IDsites").html(html);
			}
		});
	});
});
</script>
		<p>
			<label>Sites:</label>
			<select name="IDsites" id="IDsites">
				<option value="">Sélectionnez une Agence...</option>
			</select>
		</p>
...
		</form>
	</div>
</div>

**pratick** · 22/03/2018, 13h25

Merci pour ta réponse avec les bouton radio c'est pas mal
mais par contre pourquoi cette ligne ne fait pas la même opération, sa devrait modifier aussi le select, NON?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="tablinks" onclick="onglet(event,'<?php echo $row->catIDagence; ?>')"><?php echo $row->nomagence; ?></button>

Invité · 22/03/2018, 14h15

Tu comprends un peu les codes, ou pas du tout ?

**pratick** · 22/03/2018, 14h36

Je débute et commence à comprendre est a décrypte
mais vu ta phrase, j'ai beaucoup de problème de compréhension

D'une maniérè littérale le bouton dont la class et tablelink appel la fonction onglet(event, et le libellé catIDagence) et affiches le nom de l'agence dans le bouton
je le lisais comme sa
pour moi j’étais persuadé que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $row->catIDagence;

appelé la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(function()

permettait la modification du SELECT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="tablinks" onclick="onglet(event,'<?php echo $row->catIDagence; ?>')"><?php echo $row->nomagence; ?></button>

A+

Invité · 22/03/2018, 15h42

Houlà... en effet...
On dirait une poule qui a trouvé un couteau...

Puisque tu débutes, je pense que tu t'attaques à plus fort que toi...

Il faut connaitre au minimum les bases de programmation : ici en HTML, PHP, JavaScript / jQuery.
Sinon, tu vas te décourager, et vite couler...

Commence par des exercices simples, LIS DES TUTOS et FAIS les EXERCICES (quand ceux-ci sont proposés).

PHP : Le tutoriel pour grands débutants pressés (sauf bases de données, obsolètes)
bases de données : Comprendre PDO

Là, c'est comme si tu me demandais de t'apprendre le chinois et le grec ancien en claquant des doigts...

**pratick** · 22/03/2018, 21h53

Bonjour
Pour information je suis peut-être la poule mais j'ai vraiment l'utilité de mon couteau, en plus si on m'aide à me servir de mon couteau, je vais être la poule la plus intelligente du poulailler
Trève de plaisanteries.
Si tu pouvais me dire où j'ai complètement faux
Amicalement

Invité · 22/03/2018, 22h20

あなたが私の言うことを理解していないと、私はあなたに説明することができません。

Indice : c'est du japonais

**pratick** · 22/03/2018, 23h09

Salut,
Comme tu la si bien fait tu me donne des pistes, la tu m'as donné une information "c'est du japonais"
Je suis friand de tout les indice que tu peux me donner
Amicalement

**pratick** · 22/03/2018, 23h26

Demain après midi, je te prouverai que ton aide m'a étais précieux
Amicalement

**pratick** · 29/03/2018, 09h36

Bonjour jerem62
Pour information, la poule qui a trouvé le couteau , commence à savoir sans servir
pour information je mais la réponse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
40
 
<div id="Menu" class="tab">
	<div id="wrapper">
		<form action="" method="post">
		<p>
			<label>Agence :</label>
<?php
			$stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence'); 
			$I = 0;
			while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
			<label>
 
			<input class="btn btn-lg btn-default" type="button" id="catagence<?php echo $I ;?> " name="catIDagence" value="<?php echo $row->nomagence; ?>" /> </label> 			
			<input type="hidden" id="_vmyagence<?php echo $I ;?>" name="catIDagencehi" value="<?php echo $row->catIDagence; ?>" >
 
<?php
$I++;		
		}
?>
		</p>
<script>
 
$(function(){
	$('input[name=catIDagence]').on('click', function()
 
	{
		var x = $(this).attr("id").match(/[0-9]+/)[0];  
 
		$.ajax({
			type: 'GET', 
			url: 'change.php',
		    data: 'catIDagence='+$("#_vmyagence"+x).val(), 
			success: function(html) {
				$("#IDsites").html(html);
			}
		});
	});
});
</script>

Invité · 29/03/2018, 10h05

Envoyé par pratick

...la poule qui a trouvé le couteau , commence à savoir sans servir
pour information je mais la réponse

la positive attitude....

1- Tu vois qu'en cherchant, on fini par trouver !

2- On peut AMELIORER ce code :

en supprimant $I (qui ne sert à rien, puisqu'il peut être remplacé par $row->catIDagence, qui est UNIQUE !
en utilisant un attribut data à la balise input. On l’appellera data-idCat (puisqu'on veut récupérer catIDagence)

Ce qui donne simplement :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
		<p>
			<label>Agence :</label>
<?php                   $stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence'); 
                        while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
			<input class="btn btn-lg btn-default" type="button" name="catIDagenceBtn" data-idCat="<?php echo $row->catIDagence; ?>" value="<?php echo $row->nomagence; ?>" />		
<?php   } ?>
		</p>

En jQuery, on récupère la valeur de data-idCat de 2 manières (équivalentes, au choix) :

.attr('data-idCat') (la plus classique pour un attribut)
.data('idCat') (spécifique pour un attribut data-xxx)

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function(){
	$('input[name=catIDagenceBtn]').on('click', function()
	{
		var catIDagence_val = $(this).data('idCat'); 
 
		// affichage de la liste en fonction du catIDagence choisi
		$.ajax({
			type: 'GET', 
			url: 'change.php',
		    data: 'catIDagence='+catIDagence_val, 
			success: function(txthtml) {
				$('#IDsites').html(txthtml);
			}
		});
	});
});
</script>

3-

ATTENTION ! Le code ci-dessus ne sert qu'à afficher la 2ème liste !
Ces input-boutons ne permettent pas de récupérer le catIDagence choisi !

4- Si tu as besoin de récupérer le catIDagence choisi pour la suite du traitement (du formulaire) :

il faut ajouter UN SEUL input hidden (en dehors du while), dans lequel on mettra la valeur du catIDagence choisi

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
		<p>
			<label>Agence :</label>
<?php                   $stmt = $conn->query('SELECT catIDagence,nomagence FROM agence ORDER BY nomagence'); 
                        while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
			<input class="btn btn-lg btn-default" type="button" name="catIDagenceBtn" data-idCat="<?php echo $row->catIDagence; ?>" value="<?php echo $row->nomagence; ?>" />		
<?php   } ?>
			<input type="hidden" id="idcatIDagence"  name="catIDagence" value="" />		
		</p>

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
$(function(){
	$('input[name=catIDagenceBtn]').on('click', function()
	{
		var catIDagence_val = $(this).data('idCat');  
 
		// on met le catIDagence choisi dans l'input hidden, pour pouvoir la récupérer dans le traitement du formulaire
		$('#idcatIDagence').val( catIDagence_val );
 
		// affichage de la liste en fonction du catIDagence choisi
		$.ajax({
			type: 'GET', 
			url: 'change.php',
		    data: 'catIDagence='+catIDagence_val, 
			success: function(txthtml) {
				$('#IDsites').html( txthtml );
			}
		});
	});
});
</script>

sous menu impossible à faire apparaitre

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager