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

在meteor应用程序中，我需要获取选择选项字段的当前值

我的标记：

<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>

在控制台中，这将始终打印：

[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，以便获取当前所选项目的值

编辑1

我使用的是as UI框架，我启动了选择选项字段，如下所示：

Template.objectsList.events({

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

  // ...
});

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

编辑2

它与如何使用materialize呈现select option元素有关，本主题中有和

事实是，materialize将操作DOM并呈现ul列表，而不是初始的select选项元素：

因此，解决方案可能是

A从渲染的ul li列表中获取选定值 如果可能的话，在onchange事件之后执行JS init将已经收集了当前值

---

由于具体化操作DOM并使用无序列表ul实现选择视图，因此可以使用jquery检索当前值：

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

这将获得当前选定值的数组。如果只应选择一个值，则应从标记中删除多个属性：

试试这个：

<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>

---

你能和event.target核对一下吗。value@saikumar它激发，但输出为空。它必须与materialize有关。当我使用本机选择选项字段时，它会工作..好..我不知道注意：不要使用ID来寻址模板中的元素，因为ID在文档中应该是唯一的。另外，永远不要在meteor模板中使用jQuery unscoped。您可以使用template将jQuery范围限定为模板。$。。。。您可以将模板实例变量作为事件处理程序中的第二个参数或使用template.instance接收

<!-- 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
  },
// ...

<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();
}