无需插件实现jQuery对数组型动态select下拉框的校验

问题根源 #

你当前的代码存在两个核心问题导致多下拉框校验失效：

1. HTML规范要求id属性全局唯一，你循环生成多个id为level[]的select元素不符合规范，jQuery通过id选择器$('#level[]')只会匹配到页面中第一个出现的该id元素，自然只能校验单个下拉框。
2. 原有校验逻辑仅读取单个元素的值，没有遍历所有下拉框做逐一校验。

推荐解决方案（修改HTML结构，性能更优） #

先调整PHP输出的下拉框代码，给所有等级下拉框添加统一的class标识，避免重复id的问题：

while($row=$result->fetch_array()) {
?>
<select name="level[]" class="level-select">
  <option value=''>please select level</option>
  <option value='level 1'>Level one</option>
  <option value='level 2'>Level two</option>
  <option value='level 3'>Level three</option>
  <option value='level 4'>Level four</option>
</select> 
<?php
}
?>
<br><br>
<input type="button" id="btn_level" value="choose level">

对应的jQuery校验代码如下，会遍历所有下拉框逐一校验：

$(document).ready(function() {
  $('#btn_level').click(function() {
    let isValid = true;
    // 遍历所有等级下拉框
    $('.level-select').each(function() {
      if ($(this).val() === '') {
        isValid = false;
        // 可选：给未选择的下拉框加红色边框提示
        $(this).css('border', '1px solid #f00');
      } else {
        $(this).css('border', '');
      }
    });
    if (!isValid) {
      alert('请为所有下拉框选择等级');
      return false;
    }
    // 校验通过后可在此处写后续提交逻辑
  });
});

无需修改HTML的兼容方案 #

如果你不方便调整PHP输出的HTML结构，可以直接通过name属性选择器匹配所有level[]下拉框，代码如下：

$(document).ready(function() {
  $('#btn_level').click(function() {
    let isValid = true;
    $('select[name="level[]"]').each(function() {
      if ($(this).val() === '') {
        isValid = false;
        $(this).css('border', '1px solid #f00');
      } else {
        $(this).css('border', '');
      }
    });
    if (!isValid) {
      alert('请为所有下拉框选择等级');
      return false;
    }
  });
});

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