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

-2

如何为我的html页面创建一个动态下拉列表，但是使用来自数据库的值来填充基于另一个框中的值的可用下拉项目？这与您从一个下拉列表中选择州和从下拉列表中选择城市相同，您选择城市，您可以从另一个城市选择邮政编码。我一直在网上搜索，但找不到任何演示使用数据库。有没有人有他们可以发布的一些例子？我正在学习使用下面的代码，我可以从文本框中添加，但从数据库中提取时没有任何内容？ JavaScript实际上是否必须进行连接，如果是的话，你如何保护dB的凭据？如何在html中从数据库中创建一个动态的下拉列表？

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 = ""; 
}

来源

2014-04-17 user3485445

AJAX是要走的路。 –

这方面有很多问题。尝试搜索“级联下拉”。 – McGarnagle

首先，我认为你必须在web开发中理解服务器端的内容和客户端的内容。 Javascript（在这种情况下）在客户端。数据库和数据读取和排列在服务器端。 – aldux

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

来源

2014-04-17 19:34:18 manosim

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

回答

相关问题