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

【问题标题】：Can't access current value in select option input无法访问选择选项输入中的当前值
【发布时间】：2016-01-12 12:13:28
【问题描述】：

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

我的标记：

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

在模板事件中，我将event map 声明如下：

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，这样我才能得到当前选中项的值？

编辑 1

我使用materialize 作为 UI 框架，并按如下方式启动我的选择选项字段：

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

编辑 2

这与 select 选项元素如何用 materialize 渲染有关，有 a similar question on SO 和 discussion on github 关于这个主题。

问题是，materialize 将操纵 DOM 并呈现 ul List 而不是最初的@987654330 @元素：

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

所以解决办法是要么

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

【问题讨论】：

你能检查一下 event.target.value
@saikumar 它触发但输出为空
一定和物化有关。当我使用本机选择选项字段时，它可以工作..
好的..我对materializecss.com一无所知

标签： javascript meteor dom-events

【解决方案1】：

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

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

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

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

【讨论】：

注意：不要使用 id 来处理模板内的元素，因为 id 在文档中应该是唯一的。另外，永远不要在流星模板中使用 jQuery unscoped。您可以使用 template.$(...) 将 jQuery 限定为模板。您在事件处理程序或 Template.instance() 中收到模板实例变量作为第二个参数

【解决方案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();
}

【讨论】：