Can't access current value in select option input
<p>In my meteor application, I need to get the current value of a select option field.</p>

<p>My markup:</p>

<pre><code>&lt;select multiple id="category"&gt;
    &lt;option value="" disabled selected&gt;Please select&lt;/option&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>In the template events I declare the <a href="http://docs.meteor.com/#/full/eventmaps" rel="nofollow noreferrer">event map</a> as follow:</p>

<pre><code>Template.objectsList.events({

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

  // ...
});
</code></pre>

<p>in the console this would always print:</p>

<pre><code>[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
</code></pre>

<p>No matter, which option I select in the browser window, the selectedIndex attribute would always equal 0. How can I get the actual selectedIndex, so I can get the value of the currently selected item?</p>

<p><strong>EDIT 1</strong></p>

<p>I'm using <a href="http://materializecss.com/" rel="nofollow noreferrer">materialize</a> as UI framework and I initiate my select option fields as follow:</p>

<pre><code>$(document).ready(function() {
  $('select').material_select();
});
</code></pre>

<p><strong>EDIT 2</strong></p>

<p>It has to do with how the select option element is rendered with materialize, there is <a href="https://stackoverflow.com/questions/33852418/getting-the-value-off-a-select-option-box-in-javascript-i-am-using-materialize">a similar question on SO</a> and <a href="https://github.com/facebook/react/issues/3667" rel="nofollow noreferrer">discussion on github</a> about this topic.</p>

<p>Thing is, <strong>materialize</strong> would <strong>manipulate</strong> the <strong>DOM</strong> and <strong>render</strong> a ul List instead of the initial <code>select option</code> element:</p>

<pre><code>  &lt;input type="text" class="select-dropdown" readonly="true" data-activates="select-options-76ad55d8-1376-b852-a496-ef2926e59632" value="Please select"&gt;
  &lt;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;"&gt;
    &lt;li class="disabled"&gt;&lt;span&gt;Please select&lt;/span&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;span&gt;Option 1&lt;/span&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;span&gt;Option 2&lt;/span&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;span&gt;Option 3&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p>So the solution would be to either</p>

<ul>
<li>A get the selected value from the rendered ul li list (ugly)</li>
<li>execute the JS init at the time after the onchange event would already have gathered the current values (if possible)</li>
</ul>