Knockout.js中foreach绑定循环内下拉框的JavaScript查询问题

嘿，我来帮你搞定这个问题！你用Knockout的foreach生成了一堆下拉框，想要用JavaScript找到它们对吧？这里有几个靠谱的方法，按需选就行：

你给下拉框加了form-control类，直接用这个类就能定位到所有生成的下拉框：

// 获取所有生成的下拉框DOM元素
const allDropdowns = document.querySelectorAll('.form-control');

// 遍历处理每个下拉框，比如打印选中值
allDropdowns.forEach(dropdown => {
  console.log("当前下拉框选中值：", dropdown.value);
});

如果页面上还有其他带form-control类的元素怕干扰，建议给下拉框加个专属类（比如item-select），然后用document.querySelectorAll('.item-select')，这样定位更精准。

所有下拉框都在绑定了foreach: items的tbody里，先定位这个父容器再找内部的select，能避免误选页面其他地方的下拉框：

// 先找到承载foreach的tbody
const targetTbody = document.querySelector('tbody[data-bind="foreach: items"]');
// 再获取tbody里的所有下拉框
const dropdownsInTable = targetTbody.querySelectorAll('select');

既然用了Knockout，其实没必要硬操作DOM，可以通过ViewModel直接关联下拉框元素：

1. 先修改你的HTML，给select加一个element绑定：

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

2. 在你的Item ViewModel构造函数里，新增一个用来存储DOM元素的可观察属性：

function Item() {
  this.selectedValue = ko.observable();
  this.dropdownElement = ko.observable(); // 用来保存当前item对应的下拉框DOM
}

3. 之后就能直接通过ViewModel访问每个下拉框了：

// 遍历所有items，拿到对应的下拉框元素
viewModel.items().forEach(item => {
  const dropdown = item.dropdownElement();
  if (dropdown) {
    // 比如修改下拉框的样式
    dropdown.style.borderColor = '#28a745';
  }
});

这种方式完全符合Knockout的MVVM设计，避免了直接操作DOM的耦合问题，维护起来更舒服。

你的下拉框生成的ID是Items[索引].Name（比如第一个是Items[0].Name），如果只需要定位某一个特定的下拉框，直接用ID选择器就行：

// 获取索引为0的下拉框
const firstDropdown = document.getElementById('Items[0].Name');

内容的提问来源于stack exchange，提问作者aman