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>

在模板事件中，我声明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

它与如何使用materialize呈现select选项元素有关，关于此主题有a similar question on SO和discussion on github。

事实是，实现将操纵 DOM 和呈现 a ul列表而不是初始{{ 1}}元素：

select option

所以解决方案是

从渲染的ul li列表中获取所选值（丑陋）
在onchange事件已经收集了当前值（如果可能）之后执行JS init

Answer 1

由于实现操作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();
}

无法在选择选项输入

2 个答案: