Mustache循环中如何获取选中项对应的完整对象值？

首先得先修正你的Mustache模板——你现在把整个<select>标签放在了{{#data.cats}}循环里，这会导致每一只猫都生成一个独立的下拉框，这肯定不是你想要的效果对吧？应该把<select>放在循环外面，只循环生成里面的<option>选项。

然后核心问题：HTML的<option>的value属性只能存储字符串类型的值，你直接把{{this}}（也就是整个猫对象）赋值给它的话，浏览器会把对象转成[object Object]这个字符串，自然拿不到完整对象。

解决方案步骤： #

1. 修正Mustache模板，用索引作为option的value

我们可以用Mustache的内置{{@index}}变量获取当前循环的索引，把它作为option的value，这样就能通过索引关联到原数组里的对象：

<select id="clinicSelectMap">
  {{#data.cats}}
  <option value="{{@index}}">{{name}} - {{age}}</option>
  {{/data.cats}}
</select>

2. 在JS中保存原数组，通过索引获取完整对象

先把你的cats数组存到一个变量里，然后在change事件中，通过选中的索引去数组里找到对应的对象：

// 先保存原有的cats数组（可以从你的数据源直接获取，这里示例用JSON序列化的方式）
const cats = {{JSON.stringify(data.cats)}};

$('#clinicSelectMap').on("change", function(e) {
  const selectedIndex = parseInt(this.value, 10);
  const selectedCat = cats[selectedIndex];
  console.log(selectedCat); // 现在就能拿到完整的猫对象了！
})

另一种方案：用唯一标识作为value（如果name是唯一的） #

如果你的猫的name属性是唯一的，也可以用name作为value，这样可读性更强：

<select id="clinicSelectMap">
  {{#data.cats}}
  <option value="{{name}}">{{name}} - {{age}}</option>
  {{/data.cats}}
</select>

然后JS里用find方法查找匹配的对象：

const cats = {{JSON.stringify(data.cats)}};

$('#clinicSelectMap').on("change", function(e) {
  const selectedName = this.value;
  const selectedCat = cats.find(cat => cat.name === selectedName);
  console.log(selectedCat);
})

为什么原来的方法不行？ #

因为HTML的option.value只能是字符串，当你把对象赋值给它时，浏览器会自动调用对象的toString()方法，结果就是[object Object]，所以你在change事件里拿到的只是这个无意义的字符串，而不是原对象。通过索引或唯一标识关联原数组，就能完美解决这个问题啦。

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