IE et display [Résolu]

[yoann34]

Bonjours tout le monde.

Me voilà de retour pour pauser une nouvelle question où je ne trouve pas la réponse.
Je suis entrain de développer un formulaire où on peut sélectionner via un menu déroulant une langue. Si on choisie Other..., normalement un nouveau champs doit apparaître pour pouvoir saisir une autre langue non disponible dans la liste. Mais voilà le problème, bien que mon code marche bien sous firefox, il refuse de marcher sur IE8, IE9 et Chrome et donc je pense aussi sous safarie.

voici mon code

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<table style="font-size:14px;">
		<tr>
			<td>
					<select name="sourcelanguage" style="width:200px;">
 
							<option value="<?php echo $OrderForm_language_japanese;?>" class="HideOSL"> <?php echo $OrderForm_language_japanese;?> </option>
							<option value="<?php echo $OrderForm_language_other;?>"  id="ShowOSL"> <?php echo $OrderForm_language_other; ?> </option>
					</select>
				</td>
				<td id="OSL" style="display:none;position:relative;right:300px;" > <input id="textSL" type="text"  size="30" value="<?php echo $OrderForm_language_otherChoiceSource;?>" style="background-color:#FFFAC6;" ></td>
 
		</tr>
</table>

Ainsi le second <td> n'est pas visible et j'utilise Jquery pour la faire apparaitre lorsque l'on clique sur l'option avec id="ShowOSL" dans le menu déroulant. Je n'ai pas mis tout le menu pour ne pas alourdir la lecture.

Du côté de Jquery voici mon code :

Code :

1
2
3
4
5
6
7
8
9
 
 
$(document).ready(function(){
 
       $('#ShowOSL').click(function() {
		$('#OSL').css('display','block');
	});
 
});

Pour finir, j'ai quasiment tout essayer, dont visibility, les différents display avec block, inline, table, table-cell etc...
J'ai même essayer de déplacer la position en jquery du <td>. J'ai aussi transformer le <td> en <div> pour les problèmes connues de block sur <td>. Mais rien y fait. Je suis perdu et je ne comprend pas ce qui se passe.


Si quelqu'un a une petite réponse...

[Bovino]

C'est normal, il n'y a pas d'événement click pour une balise <option>
http://msdn.microsoft.com/en-us/libr...=VS.85%29.aspx
Il faut gérer le change du select et vérifier la valeur de l'option sélectionnée.

[yoann34]

Hey, merci pour cette réponse rapide.

Je me rends compte que je suis encore un gros débutant . J'ai a moitier compris, mais je vais regarder de près le lien.

Cela veut dire que firefox est très permissif par rapport aux autres navigateur.

Si toute fois tu avais un petit exemple, je le prend avec joie. Sinon merci encore.

[yoann34]

Ok merci, j'ai trouvé et ça marche super.

Je mets mon code modifié si cela peut aider quelqu'un d'autre dans le futur.

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
<table style="font-size:14px;">
		<tr>
			<td>
					<select name="sourcelanguage" style="width:200px;" id="Sl"  >
 
							<option value="<?php echo $OrderForm_language_japanese;?>" class="HideOSL"> <?php echo $OrderForm_language_japanese;?> </option>
							<option value="Other"  id="ShowOSL"> <?php echo $OrderForm_language_other; ?> </option>
					</select>
				</td>
				<td id="OSL" style="display:none;position:relative;right:300px;" > <input id="textSL" type="text"  size="30" value="<?php echo $OrderForm_language_otherChoiceSource;?>" style="background-color:#FFFAC6;" ></td>
 
		</tr>
</table>

Et pour le JS:

Code :

1
2
3
4
5
	$('#Sl').change( function() {
		var selection = $(this).val();
		if (selection == "Other") { $('#OSL').css('display','block'); }
		else { $('#OSL').css('display','none'); }
	});

Merci encore.

Problème résolu.