Javascript 在淘汰赛数据绑定 foreach 中搜索下拉菜单答案

【问题标题】：Javascript search for dropdown inside knockout data-bind foreachJavascript 在淘汰赛数据绑定 foreach 中搜索下拉菜单
【发布时间】：2023-04-09 07:14:02
【问题描述】：

使用淘汰赛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/

要查看实际效果，请单击添加行，获取数据以填充下拉列表。

不胜感激。

【问题讨论】：

更改为var selectList = $('#tdName > select > option').get();
@haim770 这给了我整个项目数组。该表可以多行，因此可以有多个选择。这就是为什么我将 ID & Name 列添加到选择中以便我可以区分它们。我想要再次检查用户是否在下拉列表中进行了任何选择。我创建了一个新的 jsfiddle，您更改为：jsfiddle.net/sq8m054L/1
您需要在 data-bind 属性中指定“optionsValue”，以便 Knockout 知道将哪个属性绑定到选择选项的“value”字段。见knockoutjs.com/documentation/options-binding.html
不能有 optionsValue。价值和选项价值不能很好地结合在一起。我记得以前用过，但遇到了一些问题。
optionsValue 和 value 一起工作，我已经修改了你的 js 小提琴来演示，但如下所述有更好的方法来做到这一点，通过迭代你的项目并确保 selectedValue()不是空白...jsfiddle.net/7wqvr854/55

标签： javascript jquery knockout.js

【解决方案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.

};

【讨论】：

这适用于选定的分隔符，但不适用于我的第一个下拉菜单。如果第一次添加空行并单击保存，则项目的长度为一个，因此它不会验证。其次，如果您添加一行并选择该下拉列表中的所有值。然后添加另一行，项目数再次为 2，因此此处也无效。我想访问 DOM，以便我可以突出显示未进行选择的确切下拉列表
您可以使用filter找到不符合要求的下拉菜单。然后，您可以通过 forEaching 覆盖无效行，在这些行上设置一些 invalid 标志。