Discussion :

[jytest]

Bonjour,

Ces codes fonctionnent très bien.
Au passage encore merci à andry.aime pour son intervention efficace sur mon dernier post.

Néanmoins, me voici avec un autre mini-souci :
Comment fixer le select à une taille fixe (ici= 280px"),
même si l'(ou les) option du select parent débordent de cette largeur de 280px,
du fait de leur ligne de texte trop grande ?

D'avance, un grand merci.


Voici un bout de code entre head et /head :

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
 
// categorie00
function gocategorie00() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td01').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie01.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat00
	sel = document.getElementById('categorie00');
	idcategorie00 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie00);
	document.getElementById("tr01").style.display = "";
}

Voici le code HTML :

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
 
    <table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="310"></td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        <tr id="tr00">
        <td style="padding:7px;">Document</td>
        <td style="padding-left:5px;" id="td00">
        	<select name="categorie00" id="categorie00" style="width:280px;" onChange="gocategorie00();">
            <option value="none">Choisissez, svp !</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";		
				}
			?>
            </select>
            <span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr01" style="display:none;">
        <td style="padding:7px;">Descriptif</td>
        <td style="padding-left:5px;" id="td01">
        	<select name="categorie01" id="categorie01" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr02" style="display:none;">
        <td style="padding:7px;">Format</td>
        <td style="padding-left:5px;" id="td02">
        	<select name="categorie02" id="categorie02" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr03" style="display:none;">
        <td style="padding:7px;">Papier</td>
        <td style="padding-left:5px;" id="td03">
        	<select name="categorie03" id="categorie03" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr04" style="display:none;">
        <td style="padding:7px;">Prix d'impression</td>
        <td style="padding-left:5px;" id="td04"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
        </tr>
        <tr id="tr05" style="display:none;">
        <td style="padding:7px;">&nbsp;</td>
        <td style="padding-left:5px;" id="td05"><a href="panier.php">Ajouter au panier</a></td>
        </tr>
    </table>

Pour info, voici "ajaxcategorie01.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie01' id='categorie01' onchange='gocategorie01()'>";
	if (isset($_REQUEST['parent'])) {
		$query = mysql_query("SELECT * FROM shop_categorie01".
			" WHERE parent=".$_REQUEST['parent'].
			" ORDER BY id");
		while ($back = mysql_fetch_assoc($query)) {
			echo "<option value='".$back['id']."' >".$back['libelle']."</option>";	
		}
	}
	echo "</select>";
?>

[franck31]

Pour cela il te faut tronquer le texte à x caractères dans tes options

[jytest]

Merci pour ta réponse !

Piste déjà exploitée...
Mais le visuel des choix dans les <select>
n'est pas très esthétique... suivant les parties tronquées !

Mais autre problème sous-jacent à ma question,
comment "allonger" les listes dont les <option> sont trop courtes ?

Comme tu vois, mon problème est double !
Il faudrait envisager une solution du type :
"min-width:280px" et "max-width:280px".
Mais même cela, j'ai testé sans succès !

Merci d'avance