Question

如何为我的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 = "";
}

Answer 1

对于AJAX，请查看此示例。这是2个下拉列表。

服务
医生

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

HTML 单击以选择服务服务1 服务2 服务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.");
}

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

1 个答案: