如何使用JavaScript/jQuery检测HTML表单中的ComboBox下拉控件

你当前的代码仅遍历了<input>类型的表单控件，但原生HTML中下拉ComboBox（单选下拉）、多选列表控件对应的是<select>标签，不属于input元素范畴，因此无法被现有逻辑识别。

修改检测逻辑，同时覆盖<input>、<select>两类原生表单控件，若需要覆盖可编辑ComboBox还可补充检测带list属性的input（关联<datalist>的可编辑下拉），修改后的核心逻辑如下：

function detectTypes() {
  // 先清空上次输出结果
  const outputDom = document.getElementById('output');
  outputDom.value = '';
  // 同时查询所有input和select控件
  const formControls = document.querySelectorAll('input, select');
  for(let i = 0; i < formControls.length; i++) {
    const control = formControls[i];
    let controlType;
    // 区分控件类型
    if(control.tagName === 'SELECT') {
      // 判断是多选列表还是单选ComboBox
      controlType = control.multiple ? '多选列表' : '下拉ComboBox';
    } else {
      // input类控件直接取type，可额外判断是否为带datalist的可编辑ComboBox
      controlType = control.hasAttribute('list') ? '可编辑ComboBox' : control.type;
    }
    // 控制台输出
    console.log(`第 ${i} 个控件类型 = ${controlType}`);
    // 输出到文本框
    outputDom.value += controlType.slice(-10) + '\n';
  }
}

若要检测第三方组件库实现的模拟ComboBox（非原生select、非原生input），可根据组件通用的class属性、自定义属性做额外匹配筛选即可，上述逻辑已经覆盖原生场景下所有的ComboBox、列表控件的识别需求。

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