如何在HTML内部用JSON对象替代外部文件实现动态下拉

很简单，我们只需要把原本存在外部文件里的JSON数据直接定义成一个JavaScript对象，然后移除$.getJSON的异步调用，把原来回调里的逻辑直接放到下拉框的change事件处理函数里就可以了。

修改后的完整代码示例 #

首先是HTML部分（假设你原来的下拉框结构是这样的）：

<select id="first-choice">
  <option value="base">请选择分类</option>
  <option value="beverages">饮品</option>
  <option value="snacks">零食</option>
</select>
<select id="second-choice">
  <option>请先选择分类</option>
</select>

然后是修改后的jQuery代码：

// 直接把原来的JSON数据定义为JS对象
const data = { 
  "beverages": "Coffee,Coke", 
  "snacks": "Chips,Cookies" 
};

$("#first-choice").change(function() {
  var $dropdown = $(this);
  var key = $dropdown.val();
  var vals = [];
  
  // 原来的switch逻辑保留，直接用内置的data对象
  switch(key) {
    case 'beverages':
      vals = data.beverages.split(",");
      break;
    case 'snacks':
      vals = data.snacks.split(",");
      break;
    case 'base':
      vals = ['Please choose from above'];
  }
  
  var $secondChoice = $("#second-choice");
  $secondChoice.empty();
  // 这里优化了option创建方式，比拼接字符串更安全
  $.each(vals, function(index, value) {
    $secondChoice.append($("<option>", { text: value }));
  });
});

关键修改点说明 #

• 移除异步请求：删掉了$.getJSON("jsondata/data.json", function(data) { ... })这一层异步包裹，因为现在数据是同步可访问的
• 内置数据对象：把原本外部JSON的内容直接定义成了data变量，和原来getJSON回调里的data参数结构完全一致，所以原来的逻辑不需要改动
• 优化option创建（可选）：把原来的字符串拼接改成了用jQuery创建<option>元素的方式，避免了HTML转义的问题，也更符合jQuery的最佳实践

这样修改后，你的下拉框动态渲染功能就完全不需要依赖外部JSON文件了，所有数据都内置在代码里啦。

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