Comment utiliser jquery pour remplir une deuxième liste de sélection basée sur une première option sélectionnée

Question

J'essaie de modifier dynamiquement les options dans une deuxième liste de sélection en utilisant jquery en fonction de l'élément de la première liste de sélection sélectionné.

La deuxième liste de sélection doit également contenir des groupes d'opt.

Comment ferais-je cela?

Merci

Answer 1

Il y a quelques plugins qui font cela. faire une recherche pour les listes de sélection liées.

un exemple peut être trouvé ici http://manuel.radiohead.cl/proyectos/jquery/popdrodown/

Answer 2

Voici un exemple en utilisant JSON comme format d'échange de données. Vous pouvez utiliser XML, JSON, HTML ou même passer le javascript pour être évalué.

PHP:

$searchParam = $_GET['SEARCH_PARAM']; 

//Get the matching results for the secondselect from your database 
$results = $DB->query('Select ID, NAME, GROUP from mytable where parent = ?', $searchParam); 

//If you're using a PHP 5.2 or a newer version you have the json_encode function 
print json_encode($results); 

HTML:

<select id="firstselect" onchange="myfunc();"> 
    <option value="">Select one...</option> 
    <option value="1">One option</option> 
    <option value="2">Second choice</option> 
</select> 

<select id="secondselect"></select> 

Javascript:

function myfunc() { 
    var value = $("#firstselect").val(); 
    $.get("myjsonprovider.php", 
    {SEARCH_PARAM: value }, 
    dataType: "JSON", 
    function(data) { 
     var options = '<option value="">Select one...</option>'; 
     var optgroup = data[0].GROUP; 
     options += '<optgroup label="' + data[i].GROUP + '">'; 
     for(var i = 0; i < data.length; i++) { 
     if(optgroup != data[i].GROUP) { 
      options += '</optgroup><optgroup label="'+data[i].GROUP+'">'; 
     } 
     options += '<option value="' + records[i].ID +'">'+data[i].NAME+'</option>'; 
     } 
     options += '</optgroup>'; 
     $("#secondselect").html(options); 
    } 
); 

}