更新具有相同选项的下拉列表,可以通过以下步骤完成:
<select>
标签来创建。例如:<select id="activityList"></select>
// 使用Fetch API获取活动列表数据
fetch('/api/activities')
.then(response => response.json())
.then(data => {
// 获取下拉列表元素
const selectElement = document.getElementById('activityList');
// 清空下拉列表的选项
selectElement.innerHTML = '';
// 根据活动列表数据创建选项并添加到下拉列表中
data.forEach(activity => {
const optionElement = document.createElement('option');
optionElement.value = activity.id;
optionElement.textContent = activity.name;
selectElement.appendChild(optionElement);
});
})
.catch(error => {
console.error('Error:', error);
});
在上述代码中,/api/activities
是后端提供活动列表数据的接口地址。根据实际情况进行修改。
change
事件来触发相应的操作。例如:const selectElement = document.getElementById('activityList');
selectElement.addEventListener('change', event => {
const selectedActivityId = event.target.value;
// 根据选中的活动ID执行相应的操作
// ...
});
根据具体需求,可以在选中活动后执行相应的操作,例如显示活动详情、加载相关数据等。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云