根据下拉字段的值选择对象的值

Question

Codepen：https://codepen.io/moarpie/pen/EBKVBL

我正在尝试在此项目中做两件事：

• 根据选择器值显示文本
• 从输入字段获取值，并根据下拉菜单中的选择按对象的值进行修改

我已经完成了第一部分，但是我无法让第二部分正常工作。

示例： 如果从下拉列表中选择 bear ，我要输出 bear.weight ，如果选择 puma ，我要输出 puma.weight 。

所以不是

var outputValue = (parseInt(userInput) / parseInt(puma.weight)) * 100;

parseInt（ puma .weight）应该是下拉菜单中选择的任何值。

我已经通过仅使用if语句来使它起作用，但这当然不是最佳实践，如果我有100个对象可供选择，这将变得很乏味。

Answer 1

在点击事件callBack函数中，您可以使用

从当前选择的选项中获取字符串。

var selectedAnimal = document.getElementById('animalSelector').value;

这将返回例如彪马

要从其关联对象获取权重值（var puma = {name：“ pumaName”，weight：500};） 您可以使用

eval(selectedAnimal).weight

例如

var outputValue = (parseInt(userInput) / parseInt(eval(selectedAnimal).weight)) * 100;

Answer 2

您可以创建一个名称为weight的对象，并为所有下拉菜单值定义值，例如下拉菜单中有值

<select id="animal">
<option value="bear">bear</option>
<option value="puma">puma</option>
</select>

然后对象必须类似于weight = {'bear': 150, 'puma': 200}; 现在假设您从下拉菜单中得到了彪马

let output = parseInt(userInput) /parseInt(weight[document.querySelector( "#animal option:selected" ).value]) * 100