Long select dans multiples form

**manudax** · 18/01/2011, 11h22

Bonjour,
je n'ai pas de code à présenter car je n'ai pas encore d'idée sur la manière dont je vais m'y prendre.

Explication:
- dans une page web je doit présenter un tableau avec de multiples lignes, environ 200.

- chaque ligne représente un formulaire composé d'un texte récupéré depuis la base, d'un select et son bouton "valider" afin de renvoyer le résultat du select dans la base.

- dans chaque formulaire un select composé d'environ 100 options récupérées depuis une autre table de la base mysql

le tableau sera généré par du code php

Comment alléger la page et éviter d'avoir 200 fois le select composé de 100 options?

Merci.

**insane1** · 18/01/2011, 14h23

Mettre un seul select avant ton tableau puis à chaque ligne du tableau mettre une checkbox et executer l'action pour chaque ligne cochée ?

**manudax** · 18/01/2011, 15h11

Merci pour cette réponse mais le tableau aura cette allure :

récup depuis bdd le select le bouton
$row['designation'] options valider
$row['designation'] options valider
$row['designation'] options valider
$row['designation'] options valider
$row['designation'] options valider

J'affiche un champ de la bdd et je choisi l'option que je veux puis je valide.
Je peux le faire sur n'importe quelle ligne.
avec 5 lignes j'aurais 5x100 options à transférer en html au client, cela risque de faire beaucoup de code pour rien. Ce n'est pas la génération du code en php qui me fais peur mais la quantité de html généré pour rien.

**Vil'Coyote** · 18/01/2011, 16h17

si tu as peure d'envoyer xxxx lignes il est peut être utile de penser à utiliser du javascript non?

comme indiqué juste avant.
affichage de x lignes. ton select juste avant ton affichage. une checkbox devant chaque ligne. et l'utilisateur devant à chaque fois qu'il souhaite faire une modif cocher la case. de là à la sélection d'une option ou à la validation de ton select enregistrement des éléments selectionner dans une ou plusieurs variables hidden généré en javascript.

**ABCIWEB** · 18/01/2011, 17h35

Ou peut-être tu peux mettre dans chaque ligne un select vide (sans les options) et onclick sur le select faire afficher les options par javascript, le tableau des options étant passé de php à javascript par un tableau json par exemple. Pas testé, c'est juste une idée.

Pour le reste 200 lignes ça commence à faire pas mal... tu devrais peut être envisager un système de pagination qui permettrait dans tous les cas un affichage plus rapide de la page.

**manudax** · 18/01/2011, 22h58

Merci pour ces réponses,
je vais voir du côté du select vide, en attendant je teste un lien vers un popup.
un select dans ce popup qui modifie le lien de la page mère une fois le choix effectué.

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
<script language="javascript">
function selected_mem(){
***ici on renvoi à la page mère la valeur selectionnée***
*** mais je butte sur l'emploi de "window.opener"***
}
</script>
 
<?php
$id = @mysql_connect( 'user', 'login', 'pass' );
@mysql_select_db( 'bdd' );
 
  $query  = 'SELECT * FROM table';
  $result = mysql_query($query);
 
echo     '<form name="selection">';
echo     '<select name="mem_sel" SIZE="15" onchange="selected_mem()">';
   while( $row = mysql_fetch_object( $result ) )
{
echo     '<option value="'.$row->mem1.'">'.$row->mem1.'</option>';
}
echo     '</select>';
echo     '</form>';

Je butte sur le retour de l'option choisie au bon endroit dans les 200 lignes

dans un premier temps il n'y aura pas 200 lignes mais je pense faire des onglets par catégorie.

**ABCIWEB** · 19/01/2011, 02h45

Je me souviens pas pour ta dernière question. Par contre j'ai testé mon idée précédente, voilà ce que ça pourrait donner au niveau du 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
header('Content-Type: text/html; charset=utf-8');
 
$option[] = 'valeur1';
$option[] = 'valeur2';
$option[] = 'valeur3';
$option[] = 'valeur4';
 
$options = json_encode($option);
print_r($_POST);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<title></title>
<script type="text/javascript">
<!--
function add_options(sel)
{
 
    var tab_value = new Array();
    tab_value = <?php echo $options ?>;
    var tab_length = tab_value.length;
 
    var selection;
    
    if(selection = document.getElementById(sel))
    {
        // tableau des options présentes dans le select ( = 1 élément si l'option choisissez est présente dans le html)
        var option = selection.getElementsByTagName('option');
        
        if(option.length == 1 && tab_length > 0)
            {
                for (var i= 0; i < tab_length; i++)
                    {
                      var element = document.createElement("option");
                      element.setAttribute('value',tab_value[i]);
                     
                      var text = document.createTextNode(tab_value[i]);
                      element.appendChild(text);
                     
                      selection.appendChild(element); 
                    }
                    
                //selection.size = 15;
             }
     }
}
-->
</script>
</head>
<body>
 
<form method="post" action="#" >
<p>
<select name="choix" style="width:100px"  id="select1" onfocus="add_options(this.id)">
<option value= "">Choisissez</option>
</select>
<input type="submit" name="ok" value="ok"/>
</p>
</form>
 
<form method="post" action="#" >
<p>
<select name="choix" style="width:100px"  id="select2" onfocus="add_options(this.id)">
<option value= "">Choisissez</option>
</select>
<input type="submit" name="ok" value="ok"/>
</p>
</form>
 
</body>
</html>

ça fonctionne correctement sous Firefox, mais sous ie6 il faut cliquer deux fois pour avoir toute la liste qui se déroule ou alors il faudrait laisser le "selection.size = 15" que j'ai mis en commentaire dans le code javascript.

Sinon tu pourrais générer l'ensemble du select en cliquant sur un bouton mais ça obligerait de faire toujours deux clics pour sélectionner l'option voulue (ce qui reviendrait au même que ton système de popup excepté que le select serait généré par exemple sur la même ligne que le bouton).

**manudax** · 19/01/2011, 10h09

merci de l'intérêt que vous portez à cette question,

çà m'a l'air d'une très bonne solution, je vais la tester ce soir et vous tiens au courant.

**manudax** · 20/01/2011, 09h13

J'ai testé le code est il fonctionne bien.
Je pense laisser la possibilité d'éditer l'information récupérée depuis la bdd.
A l'affichage de la page il sera récupéré et affiché une info précédemment enregistrée dans la bdd et à nouveau éditable/remplaçable, il faut donc que je passe par une inptubox

Pour cela j'ai fait une inputbox suivie d'un lien href qui ouvre une fenêtre laquelle affiche une dropdown avec le résultat de la requête.
A la sélection d'un élément l'information est renvoyée dans la fenêtre mère puis le popup se ferme.

Je vous remercie de l'intérêt que vous avez porté à cette idée.

Long select dans multiples form

HTML

Discussions similaires

Partager

Partager