如何用jQuery从服务返回的特定格式数据提取值构建select下拉菜单？

完全可以轻松提取所需值，只需要先把非标准的字符串格式转换成可解析的对象结构，再遍历生成option即可，具体实现步骤如下：

1. 处理原始字符串，转换为标准可解析格式 #

服务端返回的字符串不是标准JSON，需要通过正则替换将其转化为JSON格式，方便后续解析：

// 假设原始服务端返回的字符串
const rawData = '[[id=1, name=BOTTLE-1], [id=2, name=BOTTLE-2], [id=4, name=BOTTLE-3]]';

// 正则替换为标准JSON结构
const formattedStr = rawData
  .replace(/id=(\d+)/g, '"id":$1')       // 替换id字段为JSON键值对
  .replace(/name=([\w-]+)/g, '"name":"$1"') // 替换name字段为带引号的JSON键值对
  .replace(/\[([^\]]+)\]/g, '{$1}');     // 将内部的[]替换为{}，组成JSON对象

// 解析为JavaScript数组
const bottleList = JSON.parse(formattedStr);

2. 遍历数据生成下拉菜单选项 #

通过jQuery遍历解析后的数组，创建option元素并追加到目标select中：

// 定位页面上的select元素（示例中使用id为bottleSelect的select）
const $select = $('#bottleSelect');

// 遍历数组生成每个option
bottleList.forEach(item => {
  const $option = $('<option>')
    .attr('id', `opt-${item.id}`) // 给option设置id，加前缀避免全局id冲突
    .val(item.name)
    .text(item.name);
  $select.append($option);
});

补充说明 #

• 正则替换逻辑：针对原始字符串的格式特征，精准匹配id=数字和name=名称的结构，将其转化为合法的JSON键值对；
• option的id建议添加前缀（如opt-），避免和页面其他元素的id重复，若确定无冲突也可直接使用item.id。

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