Как проверить несколько полей выбора, если что-то выбрано

Question

У меня есть форма с переменным количеством выпадающих меню, которые я хочу проверить, если что-то выбрано перед отправкой.

У меня есть этот javascript, но он работает только для первого выпадающего списка.

var ddl = document.getElementById("status");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
     if (selectedValue == "")
    {
     alert("Machine status must be selected");
     return false;
    }

для этого раскрывающегося списка (это происходит из цикла, поэтому у меня их переменное количество в форме)

<select name="mstatus[]" id="status">
  <option value="">please select</option>
  <option value="status1">ok</option>
  <option value="status2">not ok</option>
</select>

Любой намек в правильном направлении, высоко ценится. спасибо

Answer 1

Я бы предложил дать выборки, которые вы хотите перебрать в том же классе, и использовать Jquerys .each().https://api.jquery.com/each/

Для проверки я бы использовал тег data, чтобы помочь вам с ярлыком предупреждения

<select class="form-select" data-label="Machine status"></select> 

Тогда код JS

$('.form-select').each(function(index, element) {
    let value = $(element).val();
    let label = $(element).data("label");
     if (value === "") {
        alert(`${label} status must be selected`);
        return false;
    }
});

БезJquery вы могли бы сделать.

document.querySelectorAll('.form-select').forEach(function (element, index) {
//do same code here
});