Question

使用knockout js

我在表格中设置了下拉列表：

 <tbody data-bind="foreach: items">
<tr>
  <td id="tdName"><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--',  attr: { name: 'Items[' + $index() + '].Name', id: 'Items[' + $index() + '].Name'}"> </select></td>
 </tr>

因此它创建了多行下拉列表。上面的html如下所示：

<select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--',  attr: { name: 'Items[' + $index() + '].Name', id: 'Items[' + $index() + '].Name'}" name="Items[0].Name" id="Items[0].Name"><option value="">--Select--</option><option value="">Alex</option><option value="">Sam</option> </select>

我有一个保存按钮，我想验证是否选择了这个下拉列表。

所以我试图在保存按钮点击上使用以下代码：

     var selectList = $('#tdName > select');         
        for (var ddl of selectList ) {               
            if (ddl.value == '') {
                ddl.className = "required text-danger form-control ddl-error";                }
        }

在调试时我的控制台中我可以看到selectList为：select＃Items [0] .Name.form-control

所以基本上我在上面尝试做的是循环遍历所有ddl，如果没有选择，则将错误类添加到它，以便突出显示。

问题是ddl.value总是''因此总是突出显示下拉列表。

这里不确定我是否在这里正确循环

我的jsfiddle在这里：

https://jsfiddle.net/aman1981/7wqvr854/51/

要查看实际操作，请点击添加行，获取数据以填充下拉列表。

欣赏投入。

Answer 1

您不应访问DOM以检查所选值。您已将它们绑定到您的viewmodel了！

Save方法中的有效性检查可以直接访问items：

self.save = function() {
  var rows = self.items();

  if (!rows.length)
    alert("You cannot save an empty table");
  else if (!rows.every(r => r.selectedSeperator()) 
    alert("Some rows do not have a selected seperator");
  // etc.

};

Javascript在knockout data-bind foreach

1 个答案: