Javascript搜索擊倒數據綁定foreach中的下拉列表

Question

使用淘汰賽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來檢查選定的值。 您已經將它們綁定到您的視圖模型！

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.

};