Javascript 当表中的值超过1时，如何从下拉列表中获取选定值？

如果我有一堆表格行，其中有select标记，我如何获得所选的值

如果变量“selected\u ingr\u action”对于每一行都是相同的，那么当我选择一个项目时，它们都会改变，而不仅仅是一个

我知道我错过了什么

{{#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>
                {{/}}

{{{#配料}
{{name}


pack:{{pack}
单价

{{单价}}
箱子价格

{{CasePrice}}
行动
改名
编辑单价
档案文件
{{/}}

有很多方法可以解决这个问题

首先，将select的值绑定到数据中

即，转动此字符串：

为此：

假设您的数据结构如下所示：

var成分=[
{
名称：String，
VendorName:String，
单价：个，
案例价格：数字，
选定的\u ingr\u操作：字符串
},
/*其他条目*/
];

再想一想，也许您不想在数据中存储操作类型。 我相信更好的方法是使用所谓的带自定义参数和

在这里，我将键添加到模板中，当您更改select值时，将使用行的索引调用相应的事件处理程序

像这样：

{{#每个成分：键}
行动
改名
编辑单价
档案文件
{{/每个}}

注意，在您的Ractive组件中，您可以引入方法

changeAction

，该方法将接收当前行（具有相应的

Name

、

VendorName

等属性）及其

键。像这样：

var-ractive=新的ractive({
/*跳过*/
更改操作：功能（输入，键）{
//用那个笑话做点什么
}
/*跳过*/
});
有很多方法可以解决这个问题

首先，将select的值绑定到数据中

即，转动此字符串：



为此：



假设您的数据结构如下所示：

var成分=[
{
名称：String，
VendorName:String，
单价：个，
案例价格：数字，
选定的\u ingr\u操作：字符串
},
/*其他条目*/
];

再想一想，也许您不想在数据中存储操作类型。
我相信更好的方法是使用所谓的带自定义参数和

在这里，我将键添加到模板中，当您更改select值时，将使用行的索引调用相应的事件处理程序

像这样：

{{#每个成分：键}
行动
改名
编辑单价
档案文件
{{/每个}}

注意，在您的Ractive组件中，您可以引入方法
changeAction
，该方法将接收当前行（具有相应的
Name
、
VendorName
等属性）及其
键。像这样：

var-ractive=新的ractive({
/*跳过*/
更改操作：功能（输入，键）{
//用那个笑话做点什么
}
/*跳过*/
});
一个选项是拥有所选值的单独映射，并使用双向绑定来更新该映射（而不是单个
所选操作
属性，或属于列表中每个项目的
所选操作
属性）。你可以看到这种方法的一个例子——细节不同，但原理相同

{{#Ingredients :i}} <!-- note the index reference -->

...

<select class="form-control" value="{{selected_ingr_actions[i]}}">
  <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>

{{{#成分：i}
...
行动
改名
编辑单价
档案文件
一个选项是拥有所选值的单独映射，并使用双向绑定来更新该映射（而不是单个
所选操作
属性，或属于列表中每个项目的
所选操作
属性）。你可以看到这种方法的一个例子——细节不同，但原理相同

{{#Ingredients :i}} <!-- note the index reference -->

...

<select class="form-control" value="{{selected_ingr_actions[i]}}">
  <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>

{{{#成分：i}
...
行动
改名
编辑单价
档案文件
我想您可能会问一个更简单的问题，即为什么行共享值。如果是这种情况，简短的回答是使用受限引用（请注意
）：


默认为root而不是当前上下文的行为将被更改为解析为当前上下文。
我认为您可能会问一个更简单的问题，即为什么行共享该值。如果是这种情况，简短的回答是使用受限引用（请注意
）：


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