Javascript поиск раскрывающегося списка внутри knockout data-bind foreach

Использование 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/

Чтобы увидеть в действии, нажмите «Добавить строку», чтобы получить данные для заполнения раскрывающегося списка.

Был бы признателен за вклад.