Can't access current value in select option input

Question

In my meteor application, I need to get the current value of a select option field.

My markup:

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

In the template events I declare the event map as follow:

Template.objectsList.events({

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

  // ...
});

in the console this would always print:

[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

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?

EDIT 1

I'm using materialize as UI framework and I initiate my select option fields as follow:

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

EDIT 2

It has to do with how the select option element is rendered with materialize, there is a similar question on SO and discussion on github about this topic.

Thing is, materialize would manipulate the DOM and render a ul List instead of the initial select option element:

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

So the solution would be to either

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

it must have to do with materialize. when I use a native select option field, it works.. — Ronin, Jan 12 '16 at 12:24
ok..I don't have any knowledge on http://materializecss.com/ — saikumar, Jan 12 '16 at 12:25

score 0 · Answer 1 · answered Jan 12 '16 at 16:08

Due materialize manipulating the DOM and implementing the select view using an unordered list (ul), the current value can be retrieved using jquery:

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

This will get an array of the currently selected values. If only one value should be selected, the multiple attribute should be removed from the <select> tag:

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

event map:

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

Notice: Do not use ids to adress elements inside a template as ids should be unique on a document. Also, never use jQuery unscoped inside a meteor-template. You can scope jQuery to a template with template.$(...). You receive the template-instance-variable as second parameter in your event-handler or with Template.instance() — macrozone, Jan 13 '16 at 13:24

score 0 · Answer 2 · answered Jan 19 '16 at 11:17

Try this:

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

Can't access current value in select option input

2 Answers2