Question

在我的javascript中，我有一个对象：

var spirits = [
  { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 },
  ...
  { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 }
]

在我的html中，有一个<select>，其中所有值都是带有饮品名称的字符串（即'Bourbon（80 proof）'）。我已将此值存储在变量中。

我想log相应的乙醇百分比（40）。这可能吗？我想过查看对象并获取drinkname的密钥，并将其记录为spirits[key].ethanol。

Answer 1

您必须绑定 change事件处理程序。

此外，使用find方法搜索数组中的对象。 find方法接受callback提供的函数作为参数。

var spirits = [
  { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 },
  { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 }
]
spirits.forEach(function(item){
  $('select').append('<option>'+item.name+'</option>');
});
$('select').change(function(){
  var self=$(this);
  var obj=spirits.find(function(item){
    return item.name==self.val();
  });
  console.log(obj.ethanol);
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

纯JavaScript版。

var spirits = [
  { name: 'Bourbon (80 proof)', ethanol: 40, sugar: 0, acid: 0 },
  { name: 'Rum (100 proof)', ethanol: 50, sugar: 0, acid: 0 }
]
spirits.forEach(function(item){
  var option=document.createElement('option');
  option.text=item.name;
  document.getElementById('select').appendChild(option);
});
document.getElementById('select').addEventListener('change',function(){
  var value=this.value;
  var obj=spirits.find(function(item){
    return item.name==value;
  });
  console.log(obj.ethanol);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option disabled selected>Select</option>
</select>

JS - 获取相应的对象值

1 个答案: