Option html
karima
-
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j' ai un prb avec option je veux par exemple
<select>
<option value="volvo">S1</option>
<option value="saab">S2</option>
<option value="opel">S3</option>
<option value="audi">S4</option>
</select>
je selectionne s1 alore un autre select rempli par ces valeurs
<select>
<option value="mod1">jee</option>
<option value="mod2"java</option>
<option value="mod3">bd </option>
<option value="mod4">data</option>
</select>
alors si choisi s2 les valeur de 2 eme select sont changer ?? par exemple
<select>
<option value="mod1">hibernat</option>
<option value="mod2">maths</option>
<option value="mod3">phys </option>
<option value="mod4">data2</option>
</select>
j' ai un prb avec option je veux par exemple
<select>
<option value="volvo">S1</option>
<option value="saab">S2</option>
<option value="opel">S3</option>
<option value="audi">S4</option>
</select>
je selectionne s1 alore un autre select rempli par ces valeurs
<select>
<option value="mod1">jee</option>
<option value="mod2"java</option>
<option value="mod3">bd </option>
<option value="mod4">data</option>
</select>
alors si choisi s2 les valeur de 2 eme select sont changer ?? par exemple
<select>
<option value="mod1">hibernat</option>
<option value="mod2">maths</option>
<option value="mod3">phys </option>
<option value="mod4">data2</option>
</select>
A voir également:
- Option html
- Editeur html - Télécharger - HTML
- Option d'ergonomie - Guide
- Option volte/vowifi - Guide
- Cette option de connexion est désactivée - Forum Ordinateurs
- Delete boot option - Forum BIOS
1 réponse
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>
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
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.
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 :
Bonne journée.