Option html
Fermé
karima
-
18 déc. 2016 à 21:26
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 19 déc. 2016 à 10:11
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 19 déc. 2016 à 10:11
A voir également:
- Option html
- Option booster free avis - Guide
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- Image cliquable html ✓ - Forum Réseaux sociaux
- Br html ✓ - Forum Webmastering
1 réponse
codeurh24
Messages postés
761
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
123
19 déc. 2016 à 08:02
19 déc. 2016 à 08:02
Bonjour.
Il faut utiliser jquery (javascript).
Avec un onchange sur le select ça permet de récupérer le choix sélectionner pour ensuite remplir le 2eme select la encore grace a jquery qui selon le choix du premier select remplir le 2eme avec des balise option.
Chaque balise option est créer a partir de tableau défini avant en javascript.
Il y a qu'avec javascript que tu peux modifier le html en temps reel mais sans ajax tout est visible pour un connaisseur.
Il faut utiliser jquery (javascript).
Avec un onchange sur le select ça permet de récupérer le choix sélectionner pour ensuite remplir le 2eme select la encore grace a jquery qui selon le choix du premier select remplir le 2eme avec des balise option.
Chaque balise option est créer a partir de tableau défini avant en javascript.
Il y a qu'avec javascript que tu peux modifier le html en temps reel mais sans ajax tout est visible pour un connaisseur.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
select{
display: block;
width: 200px;
margin: 50px;
font-size: 25px;
}
#select2{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(function(){
var transport = [
"voiture",
"bus",
"train",
"avion"
];
var fruit = [
"banane",
"pomme",
"poire",
"prune"
];
var animaux = [
"chien",
"chat",
"lapin",
"cochon"
];
var informatique = [
"smartphone",
"tablette",
"pc portable",
"pc fixe"
];
$( "body" ).on('change', 'select', function(){
$( "#select2 option" ).remove();
var choixSelected = $(this).val() ;
if( choixSelected == 'transport'){
transport.forEach(function(element) {
$('#select2').css('display','block');
$( "<option value="+element+">"+element+"</option> " ).appendTo( "#select2" );
});
}
if( choixSelected == 'fruit'){
fruit.forEach(function(element) {
$('#select2').css('display','block');
$( "<option value="+element+">"+element+"</option> " ).appendTo( "#select2" );
});
}
if( choixSelected == 'animaux'){
animaux.forEach(function(element) {
$('#select2').css('display','block');
$( "<option value="+element+">"+element+"</option> " ).appendTo( "#select2" );
});
}
if( choixSelected == 'informatique'){
informatique.forEach(function(element) {
$('#select2').css('display','block');
$( "<option value="+element+">"+element+"</option> " ).appendTo( "#select2" );
});
}
});
});
</script>
</head>
<body>
<select id="select1">
<option value="">Faite un choix</option>
<option value="transport">transport</option>
<option value="fruit">fruit</option>
<option value="animaux">animaux</option>
<option value="informatique">informatique</option>
</select>
<select id="select2">
</select>
</body>
</html>
19 déc. 2016 à 09:34
Ta réponse n'est pas tout à fait exacte ...
Quelques petites rectifications
Il faut utiliser JAVASCRIPT
Là encore... tu peux remplacer le mot jquery... par JAVASCRIPT.
Oui, seul le Javascript permet la modification du DOM (la modification de la page html) en "temps réel".
Si les données de tes listes déroulantes se trouvent en BDD tu devras, en complément du javascript, utiliser l'XMLHttpRequest (autrement dit... de l'AJAX).
Pour ce faire, il est préférable d'utiliser la librairie JQUERY (qui en simplifie l'écriture et l'utilisation) (mais c'est possible sans....)
Voici un exemple de "LISTES LIEES" en jquery + ajax
https://blog.infiniclick.fr/articles/tutoriel-listes-liees-jquery.html
Bonne journée.
Jordane
19 déc. 2016 à 10:03
Je ne rentre pas dans les détails a parler de XMLHttpRequest parce qu’il faut s'adapter au niveau de celui qui pose la question puis avec jquery il en verra même pas la couleur.
quand je peux éviter de faire des pavés, autant le faire. sinon expliquer tout en 15 ans d’expérience ça va être impossible.
19 déc. 2016 à 10:09
Lorsque tu écris :
ça laisse sous entendre qu'il n'a pas d'autres choix ..... la bonne phrase aurait été : "Tu PEUX utiliser jquery"
Ou encore :
"Il faut utiliser Javascript, et le mieux serait même jquery" (ou un truc du genre....)
Au final, sans essayer d'inculquer 15 ans d'expèrience... ça se fait très bien en quelques lignes comme tu peux le voir :
19 déc. 2016 à 10:11
Bonne journée.