How to get selected value from dropdown in a table when there is more then 1?

Question

If I have a bunch of table rows and with select tags in them how would I get the selected value?

If the variable "selected_ingr_action" is the same for every row then when I select an item they all change instead of just the one.

I know I'm missing something.

{{#Ingredients}}
                <tr>
                    <td class="ingr-bid-col"></td>
                    <td>
                        <div class="row">
                            <div class="col-xs-12">
                                <p class="ingr-name">{{Name}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <a href="">{{VendorName}}</a><br />
                                <b>pack:</b><span>{{Pack}}</span>
                            </div>
                            <div class="col-xs-6" style="padding-bottom:5px;">
                                <div class="caption">
                                    <b>unit price</b><br />
                                    <span>{{UnitPrice}}</span>
                                </div>
                                <div class="caption">
                                    <b>case price</b><br />
                                    <span>{{CasePrice}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <select class="form-control" value="{{selected_ingr_action}}">
                                    <option value="-1" selected disabled>Action</option>
                                    <option value="0">Rename</option>
                                    <option value="1">Edit Unit Price</option>
                                    <option value="2">Archive</option>
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                {{/}}

Answer 1

I think perhaps you might be asking a much simpler question about why the rows are sharing the value. If this is the case, the short answer is to use a restricted reference (notice the .):

<select class="form-control" value="{{.selected_ingr_action}}">
    <option value="-1" selected disabled>Action</option>
    <option value="0">Rename</option>
    <option value="1">Edit Unit Price</option>
    <option value="2">Archive</option>
</select>

This causes the selected_ingr_action to be bound to the list item, not the root of the ractive instance.

You can access the result on each item with a wilcard observer:

r.observe('list.*.selected_ingr_action', function(n, o, k, i){
    console.log('list index', i, 'changed from', o, 'to', n);
});

Check it out here.

The behavior of defaulting to root, rather than current context, is under consideration to be changed to resolve to the current context.