在HTML页面加载之前执行Javascript来填充下拉菜单

Question

我有2个HTML格式的下拉菜单。 需要使用数据库中存在的用户名列表填充第一个下拉列表。

其次，根据第一个下拉列表中的选择，然后我需要运行另一个JS脚本来再次调用数据库，以检索与该用户名关联的地址列表。

您能告诉我实现此目标的最佳方法是什么吗？ 1）如何在HTML表单加载之前运行JSscript以返回该列表？ 2）我应该在一个Db调用中同时获取用户名和相关地址，还是先获取用户名，然后在第一个下拉列表中使用onChange事件执行第二个调用？

任何代码将不胜感激。

谢谢

Answer 1

好吧，如果您将所有信息都放在同一个表中，那为什么不通过查询数据库一次就获得所有数据，然后按照所需的方式对数据进行排序和放入元素中。 另一种方法将需要查询数据库2次。

Answer 2

here you can create your HTML to server call OR you can make HTML locally.
i have created options for selectbox at server and innerhtml to locally.

<select id="selectbox1" onchange="getData(this)"></select>
<select id="selectbox1"></select>

$(document).ready(function() {

$.ajax({
  url: 'http://localhost/getUsername.php',
  success: function(data) {
    $('#selectbox1').html(data);
    alert('Load was performed.');
  }
});

});

function getData(selData) {

$.ajax({
  url: 'http://localhost/getSecoundCall.php?id='+selData,
  success: function(data) {
    $('#selectbox2').html(data);
    alert('Load was performed.');
  }
});

}