Wie kann ein Klick auf eine Schaltfläche den Inhalt eines Dropdown-Menüs ändern?

Ich möchte es machen, dass wenn eine Schaltfläche geklickt wird, später in einem Dropdown-Menü bestimmte Werte in demselben Dokument angezeigt werden.Wie kann ein Klick auf eine Schaltfläche den Inhalt eines Dropdown-Menüs ändern?

Zum Beispiel, wenn es einen Button namens Honda gäbe und es angeklickt wird, würde sich der Inhalt in einem Dropdown-Menü auf die Modelldetails des Autos ändern.

Wie ist es möglich, dies zu tun?

CONTEXT: Webseite auf einem PHP-fähigen Server

Vielen Dank im Voraus!

Quelle

2009-07-15 ron8

Können wir einen Kontext haben? Ist das eine Webseite, eine Desktop-Anwendung? –

Es ist auf einer Webseite mit PHP und Javascript Server aktivieren. Vielen Dank! – ron8

AJAX ist nicht erforderlich. ron8, hast du darüber nachgedacht, jQuery zu verwenden? http://jquery.com/ –

Ich schlage vor, die einfachste Lösung ein JavaScript ist. Scheint überladen, ein Framework für solch eine einfache Aufgabe zu verwenden:

<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>

Quelle

2009-07-15 15:08:36 Nathan

Sie müssten AJAX verwenden und jQuery verfügt über integrierte Funktionen, die dies vereinfachen können.

Wie für die Schaltfläche selbst, würden Sie onclick verwenden, um die Anfrage zu starten.

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

Quelle

2009-07-15 14:50:43 Juddling

Danke! Ich weiß das aber ich benötige die Funktionsinformationen. Ich bin ernsthaft fest, wie ich begrenzte Kenntnisse von Javascript und AJAX – ron8

Nun kann ich nicht hier sitzen und schreiben Sie Ihre Seite für Sie, mein Freund, grabe für einige Beispiele im Internet, haben Sie eine Chance, und wenn Sie stecken bleiben, hier posten und ich kann dir bei einem bestimmten Problem helfen. – Juddling

Obwohl lahm, können Sie die Dinge ein wenig für sich selbst vereinfachen und nicht AJAX verwenden. Just ... cringe ... setze alle Werte, die du in JavaScript-Variablen benötigst, zuerst mit (sinkender) und folge dann nathans Beispiel. Im Ernst, lerne etwas über Ajax. –

Sie könnten dies mithilfe von jquery tun, mit einem PHP-Backend-Skript zum Auffüllen der Werte des Auswahlfelds basierend auf der Schaltfläche, auf die Sie klicken.

Einige einfache HTML beginnen mit:

<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>

Dann sind Sie ein PHP-Skript bräuchten einrichten Sie die entsprechende Liste der Werte die Marke ausgewählt gegeben geben. Am besten, dies am Backend zu tun, damit Sie die Dinge nicht in Ihrem JavaScript-Code fest codieren. Erstellen Sie eine Datei namens models.php. Es sucht nach der make-Variablen, die in der Abfragezeichenfolge definiert ist, und gibt ein JSON-Array mit Modellen für diese Marke zurück. Wenn Sie möchten, können Sie dies für Marken mit einer Datenbank von Modellen anschließen, so dass Sie nicht schwer, Dinge Codierung:

<?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); 
?>

Schließlich müssen Sie die JQuery sie alle zusammen anschließen. Dieses Script-Block auf Ihrer Seite:

<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>

Natürlich stellen Sie sicher, die Basis jQuery-Skript auf Ihrer Seite enthalten;)

Quelle

2009-07-15 15:05:21 Parrots

Wie kann ein Klick auf eine Schaltfläche den Inhalt eines Dropdown-Menüs ändern?

Antwort

Verwandte Themen