如何使用JavaScript获取select下拉列表选中option的value属性值

你可以直接通过原生JavaScript给select元素绑定选择事件获取选中值，不需要依赖form表单，具体实现如下：

原生JavaScript实现（无第三方依赖） #

// 获取select元素对象
const tournamentSelect = document.getElementById('tournaments-name-list');

// 绑定选择变更触发事件
tournamentSelect.addEventListener('change', function () {
  // 取选中值转成数字类型，未选择有效选项时返回null
  const selectedTournamentId = this.value ? Number(this.value) : null;

  // 这里直接使用拿到的数值发起请求即可
  if (selectedTournamentId) {
    console.log('选中的赛事ID：', selectedTournamentId);
    // 示例请求逻辑
    // fetch(`/your-api-endpoint?tournamentId=${selectedTournamentId}`)
    //   .then(res => res.json())
    //   .then(data => { /* 处理返回数据 */ })
  } else {
    // 可自定义未选择有效选项的提示逻辑
    alert('请选择有效的赛事选项');
  }
})

补充说明 #

• 原生select元素的value属性默认就是当前选中option的value值，不需要手动遍历所有option查找选中项
• 用Number()方法将字符串类型的value转成数值类型，匹配你后续请求传参的需求
• 如果需要简化判断逻辑，可以给初始的默认提示option加上value="0"属性，后续只需要判断selectedTournamentId > 0就可以确认是有效选择

基于jQuery的实现（如果你的项目已经引入jQuery） #

$('#tournaments-name-list').on('change', function () {
  const selectedTournamentId = $(this).val() ? Number($(this).val()) : null;
  // 后续业务逻辑和原生实现一致
})

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