如何使用原生JavaScript根据下拉选择动态更新列表文本？

你的代码没有生效是因为核心逻辑错误，没有语法错误所以控制台不会输出报错：

• 判断条件变量误用：函数传入的参数sel是整个下拉选择框的DOM对象，你已经提前把选中项的值存在了selValue变量里，但if判断时却拿整个DOM对象和"first"/"second"这类字符串做对比，条件永远不成立，后续更新列表的逻辑根本不会执行
• 冗余重复代码：你写的4个if分支里的计算逻辑完全一模一样，完全不需要多分支判断，直接提取选中的份数值统一计算即可
• 变量声明不规范：原代码里的selValue、selText没有加const/let声明关键字，会变成隐式全局变量，容易造成变量污染

最小修改版本（保留原有代码结构，仅修正错误） #

function servingSize(sel) {
  // 提取选中项的值和显示的份数字符串，转成数字类型方便计算
  const selValue = sel.options[sel.selectedIndex].value;
  const servingCount = Number(sel.options[sel.selectedIndex].text);

  // 判断要使用存储选中值的selValue，不是sel本身
  // 所有选项计算逻辑完全一致，实际判断可以直接去掉，这里保留仅为对应原有写法
  if (selValue === "first" || selValue === "second" || selValue === "third" || selValue === "fourth") {
    document.getElementById("first-ingredient").textContent = `${servingCount} pounds of beef`;
    document.getElementById("second-ingredient").textContent = `${servingCount} teaspoons of salt`;
    document.getElementById("third-ingredient").textContent = `${servingCount} teaspoons of pepper`;
  }
}

HTML部分不需要修改，和原有写法一致即可：

<select name="1" id="num-of-servings" onchange="servingSize(this)">
  <option value="first">4</option>
  <option value="second">6</option>
  <option value="third">8</option>
  <option value="fourth">12</option>
</select>
<ul>
  <li id="first-ingredient">1 pound of beef</li>
  <li id="second-ingredient">1 teaspoon of salt</li>
  <li id="third-ingredient">1 teaspoon of pepper</li>
</ul>

优化后的简洁版本（符合原生JS最佳实践） #

去掉冗余分支判断和行内事件绑定，把配料基准值存在配置里方便后续修改，额外处理了单复数显示问题：

// 配料基准配置：1人份对应的配料量，后续新增/修改配料直接改配置即可
const ingredientConfig = [
  { id: "first-ingredient", base: 1, unit: "pound", name: "beef" },
  { id: "second-ingredient", base: 1, unit: "teaspoon", name: "salt" },
  { id: "third-ingredient", base: 1, unit: "teaspoon", name: "pepper" }
];

const sel = document.getElementById("num-of-servings");
// 用事件监听代替行内onchange，实现结构和逻辑分离
sel.addEventListener("change", function() {
  const servingCount = Number(this.options[this.selectedIndex].text);
  ingredientConfig.forEach(item => {
    const el = document.getElementById(item.id);
    // 处理单复数：数量为1时用单数单位，其他情况加s
    const total = servingCount * item.base;
    const unitText = total === 1 ? item.unit : `${item.unit}s`;
    el.textContent = `${total} ${unitText} of ${item.name}`;
  });
});

对应的HTML可以去掉行内onchange属性，代码更干净：

<select name="1" id="num-of-servings">
  <option value="first">4</option>
  <option value="second">6</option>
  <option value="third">8</option>
  <option value="fourth">12</option>
</select>
<ul>
  <li id="first-ingredient">1 pound of beef</li>
  <li id="second-ingredient">1 teaspoon of salt</li>
  <li id="third-ingredient">1 teaspoon of pepper</li>
</ul>

• 优先使用textContent代替innerHTML：如果只是更新纯文本内容，textContent性能更好，也能避免XSS注入风险
• 记得做数值类型转换：从表单元素获取的value、text默认都是字符串类型，做数值计算前用Number()转成数字类型，避免出现字符串拼接的异常结果
• 尽量做到结构逻辑分离：不要在HTML标签上写行内onchange这类事件属性，把交互逻辑统一放在JS代码里，后续维护更方便

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