javascript 如何从数据库中的值在html中创建动态下拉列表？

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

提问by user3485445

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?

如何为我的 html 页面创建动态下拉列表，但使用数据库中的值根据另一个值填充一个框中的可用下拉项？它与您从一个下拉列表中选择州的内容相同，在下拉列表 2 中有城市，您选择城市，您可以从另一个选择邮政编码。我一直在网上搜索，但我找不到任何可以证明的内容使用数据库。有没有人可以发布一些示例？我正在学习使用下面的代码，我可以从文本框中添加但从数据库中提取时什么都没有？javascript 实际上是否必须建立连接，如果是这样，您如何保护对 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 = "";
}

回答by manosim

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

对于 AJAX，请查看此示例。有 2 个下拉菜单。

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

因此，当您选择一项服务时，您就可以找到医生。当您选择医生时，它会将您重定向到一个 URL。希望能帮助到你！

HTML Click to select a service Service 1 Service 2 Service 3

HTML 点击选择服务 服务 1 服务 2 服务 3

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

JS

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.");
}