页面加载时jQuery无法为select标签追加option选项，求技术排查

我来帮你梳理下问题所在！你的代码逻辑本身是没问题的，但大概率是以下两个常见原因导致选项没加载出来：

1. 忘记引入jQuery库 #

你代码里用到了$和$.each这些jQuery专属方法，如果页面没有提前加载jQuery，浏览器会找不到这些方法，代码直接报错，自然没法完成选项追加。

解决方法：在你的自定义脚本之前引入jQuery，比如用CDN的方式：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 代码执行时机过早 #

如果你的脚本在DOM还没完全加载完成时就执行，$("#cuisineList")会找不到对应的select元素，append操作自然无效。

解决方法有两种：

• 确保你的script标签放在select元素的后面（你当前的写法位置是对的，但如果页面结构有调整可能受影响）
• 用jQuery的$(document).ready()包裹代码，强制等待DOM加载完成后再执行：

$(document).ready(function() {
  selectValues = { "1": "test1", "2": "test2" }
  var options = '';
  $.each(selectValues, function(key, value) {
    options += '<option value="'+key+'">'+value+'</option>';
  });
  $("#cuisineList").append(options);
});

完整可运行示例 #

这里给你一个调整后的完整代码，你可以直接测试：

<select id="cuisineList" style="width: 200px;height: 30px;"></select>

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // 建议用const/let声明变量，更规范
  const selectValues = { "1": "test1", "2": "test2" };
  let options = '';
  $.each(selectValues, function(key, value) {
    // 用ES6模板字符串拼接，可读性更好
    options += `<option value="${key}">${value}</option>`;
  });
  $("#cuisineList").append(options);
});
</script>

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