Comment un clic sur un bouton peut-il modifier le contenu d'un menu déroulant?

Je voudrais faire en sorte que quand un bouton est cliqué, certaines valeurs dans un menu déroulant apparaît plus tard dans le même document. Par exemple, s'il y avait un bouton appelé Honda et que l'on clique dessus, cela changerait le contenu d'un menu déroulant en détails du modèle de la voiture.Comment un clic sur un bouton peut-il modifier le contenu d'un menu déroulant?

Comment est-ce possible?

CONTEXTE: page Web sur un serveur PHP activé

Merci à l'avance!

Source

2009-07-15 ron8

Peut-on avoir un contexte? Est-ce une page web, une application de bureau? –

Il est sur une page Web avec php et javascript activer le serveur. Je vous remercie! – ron8

AJAX n'est pas requis. ron8, avez-vous envisagé d'utiliser jQuery? http://jquery.com/ –

Je propose une solution la plus simple JavaScript. Semble surchargé d'utiliser un cadre pour une tâche si simple:

<html> 
<head><title>JS example</title></head> 
<body> 
<script type="text/javascript"><!-- 

    // 
    var opt_one = new Array('blue', 'green', 'red'); 
    var opt_two = new Array('plaid', 'paisley', 'stripes'); 

    // 
    function updateTarget() { 
    var f = document.myform; 
    var which_r = null; 
    if (f) { 

     // first option selected? ("One") 
     if (f.trigger.value == '1') { 
     which_r = opt_one; 

     // ...or, second option selected? ("Two") 
     } else if (f.trigger.value == '2') { 
     which_r = opt_two; 

     // no known option, hide the secondary popup 
     } else { 
     f.target.style.display = 'none'; 
     } 

     // did we find secondary options for the selection? 
     if (which_r) { 

     // reset/clear the target pop-up 
     f.target.innerHTML = ''; 

     // add each option 
     for (var opt in which_r) { 
      f.target.innerHTML += '<option>' + which_r[opt] + '</option>'; 
     } 

     // display the secondary pop-up 
     f.target.style.display = 'inline'; 
     } 
    } 
    } // updateTarget() 

//--> 
</script> 
<form name="myform" action="#"> 
    <select name="trigger" onchange="updateTarget();"> 
    <option>Select one...</option> 
    <option>-</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    </select> 
    <select name="target" style="display:none;"> 
    </select> 
</form> 
</body> 
</html>

Source

2009-07-15 15:08:36 Nathan

Vous auriez besoin d'utiliser AJAX et jQuery a des fonctions intégrées qui peuvent le rendre plus simple. En ce qui concerne le bouton lui-même, vous devez utiliser onclick pour démarrer la requête.

<input type="button" onclick="carRequest('honda');" />

Source

2009-07-15 14:50:43 Juddling

Merci! Je sais ceci cependant j'ai besoin de l'information de fonction. Je suis sérieusement coincé car j'ai une connaissance limitée de Javascript et AJAX – ron8

Eh bien, je ne peux pas m'asseoir ici et écrire votre page pour vous mon ami, fouiller sur Internet pour quelques exemples, essayer, et si vous êtes coincé, poster ici et je peux vous aider avec un problème spécifique. – Juddling

Bien que boiteux, vous pouvez simplifier les choses un peu pour vous et ne pas utiliser AJAX. Juste ... grincer des dents ... mettez d'abord toutes les valeurs dont vous aurez besoin dans les variables JavaScript (plus de cringing), puis suivez l'exemple de Nathan. Sérieusement cependant, en apprendre davantage sur ajax. –

Vous pouvez le faire en utilisant jquery, avec un script backend PHP pour remplir les valeurs de la boîte de sélection en fonction du bouton sur lequel vous cliquez.

Certains HTML simple pour commencer:

<form action="script.php"> 
    <button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button> 
    <button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button> 

    <select name="models" id="models"> 
    <option value="">Please Select A Make</option> 
    </select> 
</form>

Ensuite, vous aurez besoin d'un script PHP mis en place pour vous donner la liste appropriée des valeurs données de la marque choisie. Il est préférable de faire cela sur le back-end afin de ne pas coder les choses dans votre code javascript. Créez un fichier appelé models.php. Il cherchera la variable "make" définie dans la chaîne de requête et retournera un tableau de modèles JSON pour cette marque. Si vous voulez, vous pouvez brancher jusqu'à présent à une base de données de modèles pour les marques que vous n'êtes pas coder en dur les choses:

<?php 
$models = array(); 
if ($_GET['make'] == 'Toyota') { 
    models[] = array(id: 0, name: 'Matrix'}); 
    models[] = array(id: 1, name: 'Yaris'}); 
} else if ($_GET['make'] == 'Honda') { 
    models[] = array(id: 0, name: 'Civic'}); 
    models[] = array(id: 1, name: 'Pilot'}); 
} 
echo json_encode($models); 
?>

Enfin vous avez besoin du JQuery pour accrocher tous ensemble. Ajouter ce bloc de script à votre page:

<script type="text/javascript" charset="utf-8"> 
function loadModelsForMake(carMake) { 
    $.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){ 
     var options = ''; 
     for (var i = 0; i < json.length; i++) { 
     options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>'; 
     } 
     $("models").html(options); 
    }) 
} 
</script>

Bien sûr assurez-vous d'inclure la base de script jQuery dans votre page;)

Source

2009-07-15 15:05:21 Parrots

Comment un clic sur un bouton peut-il modifier le contenu d'un menu déroulant?

Répondre

Questions connexes