如何根据HTML下拉框值动态添加FontAwesome图标

先修正你代码里的几个明显问题：

• 完全没必要用eval()，直接读取下拉框的value即可，eval既不安全又多余
• 变量名要统一，你代码里else分支用的tag_box1和前面的tag_box不一致，会导致逻辑错误

以下是完整的实现步骤：

1. 引入FontAwesome资源 #

在HTML的<head>中添加FontAwesome的资源（本地文件或官方CDN均可），确保图标能正常加载显示。

2. 调整HTML结构 #

给下拉框添加id方便JS获取，同时新增一个用来显示图标的容器：

Weather 
<select name="current_weather" id="weatherSelect">
  <option value="1">Rainy</option>
  <option value="2">Cloudy</option>
  <option value="3">Sunny</option>
</select>
<!-- 图标显示容器 -->
<div id="tag_box"></div>

3. 编写JavaScript逻辑 #

监听下拉框的选择变化，根据选中值设置对应的FontAwesome图标：

// 获取页面元素
const weatherSelect = document.getElementById('weatherSelect');
const tagBox = document.getElementById('tag_box');

// 定义天气值与图标HTML的对应关系
const weatherIconMap = {
  '1': '<i class="fa-solid fa-cloud-showers-heavy"></i>', // 雨天图标
  '2': '<i class="fa-solid fa-cloud"></i>', // 阴天图标
  '3': '' // 晴天不显示图标
};

// 监听下拉框选择变化
weatherSelect.addEventListener('change', function() {
  tagBox.innerHTML = weatherIconMap[this.value] || '';
});

// 页面加载时初始化显示对应图标（可选）
window.addEventListener('load', function() {
  tagBox.innerHTML = weatherIconMap[weatherSelect.value] || '';
});

补充说明 #

• 你可以根据需求替换FontAwesome的类名，比如雨天用fa-cloud-rain、阴天用fa-cloud-sun等，只要是FontAwesome提供的图标类都能直接用
• 这是纯前端实现，不需要用到PHP的GET/POST，因为只是客户端的显示逻辑
• 之前尝试类操作失败，大概率是因为没有正确获取元素或未触发事件监听，上面的代码通过id精准获取元素，并绑定change事件，能确保选择变化时及时更新图标

内容的提问来源于stack exchange，提问作者angie