javascript - 在 HTML 页面加载之前执行 Javascript 以填充下拉列表

Question

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

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

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

任何代码将不胜感激。

谢谢

Answer 1

好吧，如果您在同一个表中拥有所有信息，那么为什么不通过查询数据库来一次性获取所有数据，然后按照您想要的方式对元素中的数据进行排序和放置。另一种方式需要查询 DB 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.');
  }
});

}