通过Javascript填充下拉框更改所选项目

Populating Drop Down Boxes Via Javascript Change Selected Item

本文关键字：选项 项目 Javascript 填充 通过      更新时间：2023-09-26

我从一个在页面加载时使用Javascript的数组中填充了一个下拉框。但是我正在从数据库中提取数据，我如何更改所选择的数据?我宁愿不使用PHP来创建下拉框，因为我有其他非PHP的东西，使用javascript以及。我怎么做才能从PHP中得到我的下拉列表?

你可以看到它只是调用了SelectdeptDropdown函数。

<label for="collegedropdown">Collge</label>
<select name="collegedropdown" id="collegedropdown" onChange="SelectDeptDropdown();">
  <option selected="selected">Choose a college</option>
</select>
<br /> 
<label for="deptdropdown">Department</label>
<select name="deptdropdown" id="deptdropdown">
  <option selected="selected">Choose a department</option>
</select>

Javascript代码:

removeAllOptions(document.profilecreate.deptdropdown);
addOption(document.profilecreate.deptdropdown, "", "Choose One", "");
if(document.profilecreate.collegedropdown.value == 'MY CHOICE #1'){
//all options here
}
//repeat for other cases here

注意:removeallotions调用另一个函数，该函数只是清除下拉列表。addOption调用一个创建option元素的函数。

基本上你需要使用一个XHR请求。XHR请求将到达php服务器的另一个端点，它将返回数据供您填充下拉字段，然后您可以使用一些智能javascript将其插入到dom中。

理想情况下，结束点应该返回一个json数据，它只会是下拉值，你在客户端生成标记，这不是强制性的，但建议。在这里阅读更多关于XHR和json的内容。

最后，我建议您使用像jquery这样的库，它为XHR请求和DOM操作提供了简单的api，您可以使用它快速完成工作。

相关文章：