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

Développeur à mes heures perdues, je m’intéresse à la télédétection terrestre et à la détection des incendies par satellite. Passionné par Python, le machine learning et la science ouverte.

Champs de formulaire HTML dynamiques avec javascript

Recherches associées

Benjamin

Skills