Get selected option value in change event

Question

I have a dropdown with the following attributes on it:

<select value.bind="row.columns[$parent.$index].colSize" change.delegate="changeColumnSize($parent.$index, $index, row.columns[$parent.$index].colSize)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

But it seems that I cannot pass row.columns[$parent.$index].colSize as an parameter. It is always undefined.

How can I pass the selected value of the dropdown directly to the change events method?

Answer 1

You're missing the value.bind in your select options. I prefer to use mode.bind instead of value.bind though. Try something like this:

<template>
    <select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)">
        <option model.bind="1">1</option>
        <option model.bind="2">2</option>
        <option model.bind="3">3</option>
        <option model.bind="4">4</option>
    </select>
</template>



export class App {
  changedValue;


  DropdownChanged(changedVal) {
    alert(changedVal);
  }

}

I'm not sure what you're trying to bind the select to, but basically you want to create a variable that you can bind the selected value too. So, the selected value is going to be set to the variable of changedValue. I like to use model.bind because I can bind true/false values instead of everything being a string.

I've made a running Gist for you to use if needed: https://gist.run/?id=87f6897928feb504dad638d439caf92f