Width de mon select pas fixe
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:
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:
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;"> </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:
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>";
?> |
