So erstellen Sie eine dynamische drop-down-Liste im html von Werten in der Datenbank?

Wie kann ich eine dynamische drop-down-Liste für meine html-Seite, aber verwenden Sie Werte aus einer Datenbank zu füllen den verfügbaren drop-down-Elementen in einem Feld basierend auf dem Wert eines anderen? Es ist identisch mit dem etwas, in dem Sie Zustand aus einer drop-down-und im dropdown-2 gibt es die Städte, die Sie auswählen, Stadt, und Sie können wählen Sie die zip-codes von anderen.Ich habe die Suche im Netz, aber ich kann nichts finden, das veranschaulicht die Verwendung einer Datenbank. Hat jemand ein paar Beispiele, die Sie veröffentlichen können? Ich Lerne mit dem code unten kann ich hinzufügen von einem Textfeld aber nichts, wenn die Entnahme aus einer Datenbank? Funktioniert javascript eigentlich haben, um die Verbindung herzustellen und wenn ja, wie schützen Sie die Anmeldeinformationen für die dB? 

function addCombo() {
    var textb = document.getElementById("txtCombo");
    var combo = document.getElementById("combo");

    var option = document.createElement("option");
    option.text = textb.value;
    option.value = textb.value;
    try {
        combo.add(option, null); //Standard 
    }catch(error) {
        combo.add(option); //IE only
    }
    textb.value = "";
}
  • AJAX ist der Weg zu gehen.
  • Es gibt viele Fragen, auf dies. Versuchen Sie eine Suche für "cascading Dropdown".
  • Zuerst denke ich, dass Sie haben zu verstehen, in der web-Entwicklung, was auf server und was auf client-Seite. Javascript (in diesem Fall) ist auf der client-Seite. Datenbank und Daten abrufen und Arrangement sind auf der server-Seite.
  • Auch möchten Sie vielleicht einen Blick auf dieses link. Ich Tat das gleiche. Hatte einige Fragen und habe hier etwas Hilfe zu SO.
  • Ich verstehe aber in dem Fall eine dynamische drop-down-wäre dies als server-Seite oder client-Seite. Das Backend ist php aber wenn ich sehe, einige andere Websites, die tun Zustand zu Stadt und von Stadt zu zip, die ich nicht bekommen kann meinen Kopf herum, wie dies geschieht, einfach nur noch!
InformationsquelleAutor user3485445 | 2014-04-17
  1. 0

    Für AJAX, überprüfen Sie dieses Beispiel. Das sind 2 dropdowns.

    • Dienstleistungen
    • Ärzte

    Also, wenn Sie wählen Sie einen Dienst, dann erhalten Sie die ärzte. Wenn Sie einen Arzt, leitet es Sie auf eine URL. Hoffe, es hilft!

    HTML

    Klicken Sie auf wählen Sie einen service
    Service 1
    Service 2
    Service 3 

    <select id="doctors">
</select>

    JS

    //The data that the service should return
//JSFiddle will echo it back for us on that URL
var doctors = {
    success: true,
    doctors: [
        {
            id: 71,
            name: "George"
        },
        {
            id: 72,
            name: "James"
        }
    ]
}

//This is what your JSON from PHP should look like
var jsonDoctors = JSON.stringify(doctors);
console.log(jsonDoctors);

//Bind change function to the select
jQuery(document).ready(function() {
    jQuery("#services").change(onServiceChange);
});

function onServiceChange()
{
    var serviceId = jQuery(this).val();    

     $.ajax({
        url: '/echo/json/',
        type: 'post',
        data: {
            serviceId: serviceId,
            json: jsonDoctors //jsFiddle echos this back to us
        },
        success: onServicesRecieveSuccess,
        error: onServicesRecieveError
    });
}

function onServicesRecieveSuccess(data)
{
    //Target select that we add the states to
    var jTargetSelect = jQuery("#doctors");

    //Clear old states
    jTargetSelect.children().remove();

    //Add new states
    jQuery(data.doctors).each(function(){        
        jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>');
    });
}

function onServicesRecieveError(data)
{
    alert("Could not get services. Please try again.");
}
    InformationsquelleAutor manosim
Schreibe einen Kommentar