Champs de formulaire HTML dynamiques avec javascript

Exemple 1:

Champs de formulaire HTML dynamiques avec javascript (2/2)

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">  
$(document).ready(function() {

  $("#select_01").change(function() {

    var el = $(this) ;

    if(el.val() === "Fevrier" ) {
    $("#select_02").append("<option>03</option>");
    }
      else if(el.val() === "02" ) {
        $("#select_02 option:last-child").remove() ; }
  });

});
</script> 
</head>
<body>

Source:   
<select id="select_01" name="select_01">
 <option>Janvier</option>
 <option>Fevrier</option> 
</select>

Status:
<select id="select_02" name="select_02">
<option>01</option>
<option>02</option>
</select>

</body>
</html>

Exemple 2:

Champs de formulaire HTML dynamiques avec javascript (1/3)

Champs de formulaire HTML dynamiques avec javascript (2/3)

Champs de formulaire HTML dynamiques avec javascript (3/3)

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">  
$(document).ready(function(){

//let's create arrays
var math = [
    {display: "Analyse", value: "Analyse" },
    {display: "Algebre", value: "Algebre" },
    {display: "Probabilites", value: "Probabilites" }];

var Histoire = [
    {display: "Louis XIV", value: "Louis XIV" },
    {display: "La revolution", value: "La revolution" },
    {display: "Le moyen age", value: "Le moyen age" },
    {display: "La Commune de Paris", value: "La Commune de Paris" }];

var Francais = [
    {display: "Conjugaison", value: "Conjugaison" },
    {display: "Grammaire", value: "Grammaire" }];

//If parent option is changed
$("#parent_selection").change(function() {
        var parent = $(this).val(); //get option value from parent

        switch(parent){ //using switch compare selected option and populate child
              case 'math':
                list(math);
                break;
              case 'Histoire':
                list(Histoire);
                break;             
              case 'Francais':
                list(Francais);
                break; 
            default: //default child option is blank
                $("#child_selection").html('');  
                break;
           }
});

//function to populate child select box
function list(array_list)
{
    $("#child_selection").html(""); //reset child options
    $(array_list).each(function (i) { //populate child options
        $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
    });
}

});
</script>

</head>
<body> 
<div class="wrapper">
Selectionnez une matiere:
<select name="parent_selection" id="parent_selection">
    <option value="">-- Please Select --</option>
    <option value="math">math</option>
    <option value="Histoire">Histoire</option>
    <option value="Francais">Francais</option>
</select>
<select name="child_selection" id="child_selection">
</select>
</div>
</body>
</html>

Recherches associées

Liens	Site
Drop-down box dependent on the option selected in another drop-down box	stackoverflow
Select Box Change Dependent Options dynamically	sanwebe

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Champs de formulaire HTML dynamiques avec javascript

Recherches associées

Benjamin

Skills