affichage changement select ne marche pas
bonjour à tous,
voici quelque ligne qui permettent lors d'une selection dans une liste déroulante d'afficher dans une div le contenu de la sélection en cours
<select id='monselect'>
<option value=''></option>
<option value='1'>valeur 1</option>
<option value='2'>valeur 2</option>
</select>
$(document).ready(function(){
$('#monselect').change(function () {
v = $("#monselect option:selected").val();
t = $("#monselect option:selected").text();
$('#retour').html(v+" "+t);
})
.trigger('change');
}).j'ai voulue le réadapter à lon formulaire mais rien ne se passe
$('.my_aircraft').change(function ()
{
v = $(".my_aircraft option:selected").val();
t = $(".my_aircraft option:selected").text();
$('.test').html(v+" "+t);
})
.trigger('change');l'intégration est en ligne 160
?<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<label>Aéroport de départ</label>
<input type="text" size="4" autocomplete="off" name="user_name" id="user_id" class="user_name" />
<span class="check" ></span> <br/><br/>
<label>Aéroport d'arrivé</label><input type="text" autocomplete="off" size="4" name="user_name2" id="user_id" class="user_name2" />
<span class="check2" ></span><br/><br/>
<label>Altitude de croisiére</label><input type="text" autocomplete="off" size="4" name="altitude" id="altitude" class="altitude" />
<span class="check3" ></span><br/><br/>
<span class="list"></span>
<span class="check4" ></span><br/><br/>
<span class="test"></span><br/><br/>
<script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.check').show();
$('.check').fadeIn(400).html('<img src="images/ajax-loading.gif" /> ');
var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "username-check.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==""){
$('.check').html('<img src="images/error.png" /> ICAO non reconnu');
$(".check").removeClass("green");
$('.check').addClass("red")
$(".user_name").removeClass("white");
$(".user_name").addClass("yellow");
}else{
$('.check').html(result);
$('.para2').html('</BR><span class="check2" ></span>');
$(".check").removeClass("red");
$('.check').addClass("green");
$(".user_name").removeClass("yellow");
$(".user_name").addClass("white");
var checkname4=$('.user_name').val();
var availname4=remove_whitespaces(checkname);
var String = 'icaod='+ availname4;
$.ajax({
type: "POST",
url: "aircraft.php",
data: String,
cache: false,
success: function(result3){
var result3=remove_whitespaces(result3);
if(result3==""){
$('.check4').html('<img src="images/error.png" /> Aucun appareil disponible');
$('.list').html('');
}else{
var result3=remove_whitespaces(result3);
var result3='<label>Vous pouvez choisir un avion</label><SELECT id="my_aircraft" name="aircraft"> <OPTION VALUE="0">Liste des avions</OPTION>'+ result3 +'</SELECT>';
$('.list').html(result3);
$('.check4').html('');
}
}
});
}
}
});
}else{
$('.check').html('');
}
});
$('.user_name2').keyup(function()
{
var checkname2=$(this).val();
var availname2=remove_whitespaces(checkname2);
if(availname2!=''){
$('.check2').show();
$('.check2').fadeIn(400).html('<img src="images/ajax-loading.gif" /> ');
var String = 'username='+ availname2;
$.ajax({
type: "POST",
url: "username-check.php",
data: String,
cache: false,
success: function(result2){
var result2=remove_whitespaces(result2);
if(result2==""){
$('.check2').html('<img src="images/error.png" /> ICAO non reconnu');
$(".check2").removeClass("green");
$('.check2').addClass("red")
$(".user_name2").removeClass("white");
$(".user_name2").addClass("yellow");
}else{
$('.check2').html(result2);
$(".check2").removeClass("red");
$('.check2').addClass("green");
$(".user_name2").removeClass("yellow");
$(".user_name2").addClass("white");
}
}
});
}else{
$('.check2').html('');
}
});
$('.altitude').keyup(function()
{
var altitude=$(this).val();
if(altitude.match(/^[0-9]{3,5}$/))
{
$('.check3').html('<img src="images/accept.png" /> Altitude conforme');
$(".check3").removeClass("red");
$('.check3').addClass("green")
$(".Altitude").removeClass("yellow");
$(".Altitude").addClass("white");
}
else
{
$('.check3').html('<img src="images/error.png" /> Altitude non reconnu');
$(".check3").removeClass("green");
$('.check3').addClass("red")
$(".Altitude").removeClass("white");
$(".Altitude").addClass("yellow");
}
});
$('.my_aircraft').change(function ()
{
v = $(".my_aircraft option:selected").val();
t = $(".my_aircraft option:selected").text();
$('.test').html(v+" "+t);
})
.trigger('change');
});
function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>
</body>
</html>si quelqu'un pouvait jeter un coup d'oeil
Merci d'avance pour votre aide.
Flo
mettre dans la permiére case LFPO pour permettra la suite du formulaire.
6 réponses
j'ai trouvé
mes sélect dépendé d'un span qui s'appelle list je ne pointé pas le bon élément
voici la correction pour les lignes 160 à 166
$('.list').change(function ()
{
v = $("#my_aircraft option:selected").val();
t = $("#my_aircraft option:selected").text();
$('.test').html(v+" "+t);
});Salut !
Le ".", c'est pour les classes. Les id, c'est "#".
Du coup, ce n'est pas
$('.my_aircraft').change(function () { ... });mais
$('#my_aircraft').change(function () { ... });puisque "my_aircraft" est un id.
Idem pour le reste du code :)
j'utilise des span class
le reste du code marche très bien et j'ai essayé ta modif, et cela ne marche pas.
je ne connais pas jquerry,
mais je pense que le soucis viens de cette ligne que j'ai supprimé
$(document).ready(function(){il doit falloir la changé par quelque chose, mais quoi
Hello :)
Ce que je t'ai dit, ça fonctionne très bien. Si je ne me trompe pas, tu veux qu'un "bout de texte" s'affiche en fonction de ce que l'utilisateur a choisi dans ton select. Tu utilise des span class, certes, mais ton select ne contient qu'un id. Tu ne lie pas ton évènement sur le bon sélecteur.
Si tu veux que ton texte change en fonction de ton select, l'évènement doit être lié au select, et non au span.
Ainsi, ce bout de code fonctionne :
$('#my_aircraft').change(function() {
$(".test").html($(this).val());
});Septique ? voici la preuve : http://jsfiddle.net/Y6KYf/
pas septique du tout car mon connaissance en JQ sont proche du zéro, c'est juste que ça marche comme je l'ai écrit, mon méthode doit être barbare je suppose.