无法访问选择选项输入的当前值。

Question

在我的流星应用程序中，我需要获取一个选择选项字段的当前值。

我的标记。

<select multiple id="category">
    <option value="" disabled selected>Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

在模板事件中，我声明了 活动图 如下所示。

Template.objectsList.events({

  // #category represents my select option input
  "change #category": function (event) {
    console.log(event.target.options);
  },

  // ...
});

在控制台中，这总是打印出来。

[option, option, option, option, selectedIndex: 0, namedItem: function, add: function, remove: function, item: function]
    0: option
    1: option
    2: option
    3: option
    length: 4
    selectedIndex: 0
    __proto__: HTMLOptionsCollection

无论我在浏览器窗口中选择哪个选项，selectedIndex属性总是等于0。 我怎样才能得到实际的selectedIndex，从而得到当前选中项目的值？

EDIT 1

我用的是 实现 作为UI框架，我启动了我的选择选项字段，如下所示。

$(document).ready(function() {
  $('select').material_select();
});

EDIT 2

这与选择选项元素如何用materialize渲染有关，有一个叫 类似的问题 和 github上的讨论 关于这个话题。

事情是。实现 会 操纵 的 DOM 和 渲染 一个ul列表，而不是最初的 select option 元素。

  <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-76ad55d8-1376-b852-a496-ef2926e59632" value="Please select">
  <ul id="select-options-76ad55d8-1376-b852-a496-ef2926e59632" class="dropdown-content select-dropdown" style="width: 420px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
    <li class="disabled"><span>Please select</span></li>
    <li class=""><span>Option 1</span></li>
    <li class=""><span>Option 2</span></li>
    <li class="active"><span>Option 3</span></li>
  </ul>

所以，解决方案将是要么

• A从渲染后的ul li列表中获取选择的值（丑）。
• 在onchange事件已经收集到当前值后执行JS init（如果可能的话）。

Answer 1

Due materialize操纵DOM并使用无序列表实现选择视图(ul)，可以使用jquery检索当前值。

$("#category").val(); // #category represents the original select option we want to read

这将得到一个包含当前选择的值的数组。如果只选择一个值，那么 multiple 属性应从 <select> 标签。

<!-- only 1 attribute selectable -->
<select id="category">
    <option value="" disabled selected>Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<!-- multiple attributes selectable -->
<select multiple id="category">
    <option value="" disabled selected>Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

事件地图：

Template.objectsList.events({
  "change #category": function (event) {
    var selectedValue = $("#category").val();
    // do something with selectedValue
  },
// ...

Answer 2

试试这个

<div class="input-field col s12">
<select id="category>
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<label>Materialize Select</label>

"change #category": function(e, t) {
 var changedValue = $(e.currentTarget).val();
}