How to create a dynamic drop down list in html from values in database?

Question

How can I create a dynamic drop down list for my html page but use values from a database to populate the available drop down items in one box based on the value of another? It is identical to something where you select state from one drop down and in dropdown 2 there are the cities, you select city and you can select the zip codes from another.I have been searching on the net but I can not find anything that demonstrates using a database. Does anyone have some examples they can post? I am learning using the code below, I can add from a text box but nothing when pulling from a database? Does javascript actually have to make the connection and if so how do you protect the credentials to the 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 = "";
}

Answer 1

For AJAX, check this example. The are 2 dropdowns.

• Services
• Doctors

So when you choose a service, then you can get the doctors. When you choose a doctor it redirects you to a URL. Hope it helps!

HTML Click to select a 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.");
}