如何用JavaScript获取Select元素ID？多Select传入check_database函数

这问题其实挺常见的，我给你几个简单实用的方案，按需选就行：

方案1：直接在onchange事件中传递当前元素的ID #

这是最直接的方式，修改每个<select>的onchange属性，把当前元素的ID直接传进函数：

<select class='form-control' id='name_pipe1' name='name_pipe[]' onchange='check_database(this.id)' required>
  <option>-- Choose Pipe Name --</option>
</select>
<select class='form-control' id='name_pipe2' name='name_pipe[]' onchange='check_database(this.id)' required>
  <option>-- Choose Pipe Name --</option>
</select>
<select class='form-control' id='name_pipe3' name='name_pipe[]' onchange='check_database(this.id)' required>
  <option>-- Choose Pipe Name --</option>
</select>

然后对应的JavaScript函数接收这个ID参数：

function check_database(selectId) {
  // 这里就能拿到触发事件的select的ID了
  console.log("当前操作的Select ID：", selectId);
  // 接下来写你的数据库检查逻辑就行
}

这里的this指向触发change事件的那个<select>元素，直接取它的id属性传参就搞定了，简单粗暴好用。

方案2：通过事件对象获取ID #

如果你需要更多事件相关的信息（比如选中的选项值），可以传递事件对象，再从里面提取ID：

修改HTML的onchange：

<select class='form-control' id='name_pipe1' name='name_pipe[]' onchange='check_database(event)' required>
  <option>-- Choose Pipe Name --</option>
</select>

然后函数里这样处理：

function check_database(event) {
  // event.target就是触发事件的select元素
  const selectId = event.target.id;
  console.log("当前操作的Select ID：", selectId);
  // 还能顺便拿到选中的值：event.target.value
}

这种方式更灵活，适合需要用到事件其他属性的场景。

方案3：批量绑定事件（推荐，更易维护） #

如果你的select元素很多，或者不想用内联的onchange（内联事件后期维护起来比较麻烦），可以用JavaScript批量获取元素并绑定事件：

// 通过name属性和标签名筛选出所有目标select
const allPipes = document.querySelectorAll('select[name="name_pipe[]"]');

// 遍历每个select，绑定change事件
allPipes.forEach(select => {
  select.addEventListener('change', function() {
    // 这里的this就是当前的select元素
    check_database(this.id);
  });
});

// 你的check_database函数不变
function check_database(selectId) {
  console.log("当前操作的Select ID：", selectId);
  // 数据库检查逻辑
}

这种方式不需要修改HTML里的onchange属性，所有事件逻辑都集中在JS里，后期要修改或者新增select元素时更方便。

内容的提问来源于stack exchange，提问作者ѕуαfяιє mαhєndrα