javascript - html select 无法显示正确的值

Question

在firefox 46.0.1中，只有一个选择element与一些option元素。 select value 属性正在由 JavaScript 代码更改，并在浏览器检查器窗口中进行确认

<select value="G" data-id="someid">其中一个选项是
<option value="G">G please</option>

但是在控制台中:
$('select').first().val()给出空字符串，如""因此显示屏不会像我预期的那样显示所选选项。

如果我发出 $('select')[0].value = "R" ，显示屏会通过显示正确的选项值进行响应。

为什么以及如何解决这个问题，以便在 javascript 代码更改 select 元素的 value 属性时显示正确的选项？谢谢

<template name="select">
  <select data-id={{_id}} value={{value}}>
    {{#each values}}
      <option value={{value}}>{{caption}}</option>
    {{/each}}
  </select>
</template>

该值由 Meteor Template 帮助程序填充。

编辑
这是来自助手的底层数据:“sample”

{
    "_id" : "SqNF9wTsbaxEhj5b4",
    "element" : "select",
    "action" : "action12",
    "values" : [
        {
            "group" : "bCode",
            "value" : "G",
            "caption" : "Select food type..."
        },
        {
            "group" : "bCode",
            "value" : "O",
            "caption" : "water"
        },
    ],
    "userId" : "uhx7rt",
    "createdAt" : 1464135235771,
    "value" : "G"
}

Answer 1

正如 charlietfl 在评论中建议的那样。 我不得不放弃使用 value select 上的属性元素，而不是我使用 selected option 上的属性元素。

正如另一篇文章中所建议的那样，Meteor 不允许 html 属性为空值。我必须删除未选择的选项的属性。