如何根据数据库中的值在 html 中创建动态下拉列表？答案

【问题标题】：How to create a dynamic drop down list in html from values in database?如何根据数据库中的值在 html 中创建动态下拉列表？
【发布时间】：2014-04-18 03:34:18
【问题描述】：

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

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 是要走的路。
对此有很多问题。尝试搜索“级联下拉菜单”。
首先，我认为您必须了解 Web 开发中服务器端的内容和客户端的内容。 Javascript（在这种情况下）在客户端。数据库和数据的获取和整理在服务器端。
另外你可能想看看这个link。我做了同样的事情。在 SO 遇到了一些问题并获得了一些帮助。
我理解，但在动态下拉的情况下，这将被视为服务器端还是客户端。后端是 php，但是当我看到其他一些网站对城市和城市进行压缩时，我无法理解这是如何完成的！

标签： javascript php jquery html

【解决方案1】：

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

服务
医生

因此，当您选择服务时，您就可以获得医生。当您选择医生时，它会将您重定向到一个 URL。希望对您有所帮助！

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

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

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

【讨论】：