Question

在这里使用Knockout JS。

当前设置：

我有一个HTML表格，表格有5列。我有按钮向表中添加一行，然后删除每行的按钮以删除它。我在这个表的2列中也有一个下拉列表。第一个下拉列表是从表格外的按钮单击事件填充的。即，当您按下获取数据按钮时，它会填充下拉列表。此外，当您选择任何dropdpwns时，将使用选择调整行数据。最后有一个保存按钮。单击时，我想保存所有数据。

我的下拉信息如下：

  <td><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--'"> </select></td>

  <td>
    <select class="form-control" data-bind="value: selectedSeparator">
       <option value="">--Select--</option>
       <option value="#">#</option>
       <option value="@">@</option>          
     </select>
  </td>

问题：

我的问题是关于验证。由于我在客户端点击添加每一行，这些动态添加这些下拉列表如何在下拉列表中进行验证这样，当用户单击“保存”按钮时，如果任何行没有选中下拉列表，则会突出显示该行并抛出错误。

我的jsfiddle设置如下：

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

------更新----------

我现在已经更新了我的jsfiddle。现在每个下拉列表都有不同的ID。请参阅更新的小提琴：

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

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>

您可以在其中看到ID和名称为：＆＃34; Items [0] .Name＆＃34; 我还在TD上添加了ID作为tdName

当我使用以下代码时点击按钮：

  var selectList = $('#tdName > select');
        for (var selectName of selectList) {
          //Here I can see my dropdown but how to check dropdown selected text/value here
        }

通过上面的代码我是否可以循环所有下拉菜单并查看是否选中

由于

Answer 1

您可以根据条件使用CSS类来标记无效行。

HTML：

<tr data-bind="css: { invalidRow: isInvalid }">

CSS：

.invalidRow {
  background-color: #ffb8b5;
}

使用Javascript：

self.Save = function(){
    for (i in self.items()) {
    if (typeof self.items()[i].selectedValue() == "undefined") {
      self.items()[i].isInvalid(true);
      alert("Select all dropdown")
    }
  }
};

Knockout JS：验证表中的下拉列表

1 个答案: