HTML Select框切换后始终获取默认选项文本，求JS解决方法

我试过Stack Overflow上各种方法，但始终只能拿到HTML Select框默认的第一个选项“--Select--”的文本。需求是在alert弹窗里显示选中选项的文本，但现在弹窗一直显示第一个选项的文本。

我的代码如下：

<div class="form-group col-md-2">
  <label>Select DB Table to sync</label>
  <select name="dbTable" id="dbTable">
    <option value="100">--Select--</option>
    <option value="1001">TB_PAY_STATUSCODE_PRIORITY</option>
    <option value="1002">TB_PAYEE_ACCT_EXTRACT</option>

    <option value="1003">TB_PGP_PUBLICKEY</option>
    <option value="1005">TB_PAYMENT_STAGE2_CONFIG</option>
    <option value="1004">TB_PAYMENT_CONFIG</option>
    <option value="1000">Not Picked</option>
  </select>
</div>
<div class="form-group col-md-2">
  <input type="submit" value="DB Update" id="submit" onclick="testme();" style="margin-top: 13%;" />
</div>
</form>

<script type="text/javascript">
  var sel = document.getElementById('dbTable');
  var text = sel.options[sel.selectedIndex].text;
  var text1 = $("#dbTable :selected").text();
  var button = document.getElementById('submit');
  button.addEventListener('click', function(e) {
    //sel.options[1].selected = true;
    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);

      sel.dispatchEvent(evt);
    } else {
      sel.fireEvent("onchange");
    }
    //sel.dispatchEvent(new CustomEvent('change') 

  });
  sel.addEventListener('change', function(e) {
    alert(text + text1);
  });

  $(document).on('submit', 'form', function testme() {
    var sel1 = document.getElementById('dbTable');
    var text = sel1.options[sel.selectedIndex].text;

    var dbTable = data;
    alert("inside testme()" + sel1 + text);
    $.ajax({
      type: 'get',
      url: "/SyncPage",
      data: JSON.stringify(dbTable),
      contentType: "application/json",
      success: function(data) {
        $('#cover-spin').hide();

        console.log(data);
        console.log("Data sync Loading...");
      },
      error: function(e) {
        console.log("ERROR: ", e);
        e.preventDefault();
      },

    });
    console.log(dbTable);
    alert(dbTable);

  });
</script>

问题根源 #

1. 变量赋值时机错误：页面加载时就把text、text1赋值为默认选项的文本，之后选中其他选项时这两个变量不会自动更新，始终保留初始值。
2. 事件绑定冗余冲突：提交按钮同时绑定了onclick和addEventListener('click')，还监听了form的submit事件，逻辑混乱导致触发时机异常。
3. 函数内变量错误：testme函数里用全局的sel获取选中索引，而非当前的sel1，且var dbTable = data;中data未定义，会直接报错。

修复后的代码 #

<div class="form-group col-md-2">
  <label>Select DB Table to sync</label>
  <select name="dbTable" id="dbTable">
    <option value="100">--Select--</option>
    <option value="1001">TB_PAY_STATUSCODE_PRIORITY</option>
    <option value="1002">TB_PAYEE_ACCT_EXTRACT</option>
    <option value="1003">TB_PGP_PUBLICKEY</option>
    <option value="1005">TB_PAYMENT_STAGE2_CONFIG</option>
    <option value="1004">TB_PAYMENT_CONFIG</option>
    <option value="1000">Not Picked</option>
  </select>
</div>
<div class="form-group col-md-2">
  <input type="submit" value="DB Update" id="submit" style="margin-top: 13%;" />
</div>
</form>

<script type="text/javascript">
// 工具函数：实时获取选中选项的文本
function getSelectedTableText() {
  const selectEl = document.getElementById('dbTable');
  return selectEl.options[selectEl.selectedIndex].text;
}

// 监听下拉框切换，实时弹窗显示选中文本
document.getElementById('dbTable').addEventListener('change', function() {
  alert(getSelectedTableText());
});

// 监听表单提交，处理AJAX逻辑
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交，避免页面刷新
  const selectedText = getSelectedTableText();
  const selectedValue = document.getElementById('dbTable').value;

  alert("inside testme()" + selectedText);

  $.ajax({
    type: 'get',
    url: "/SyncPage",
    data: JSON.stringify({ 
      tableName: selectedText,
      tableValue: selectedValue
    }), // 传递正确的选中数据
    contentType: "application/json",
    success: function(data) {
      $('#cover-spin').hide();
      console.log(data);
      console.log("Data sync Loading...");
    },
    error: function(e) {
      console.log("ERROR: ", e);
    }
  });
});
</script>

关键修改说明 #

• 新增工具函数getSelectedTableText，每次需要时实时获取选中选项的文本，确保拿到最新值。
• 移除冗余的事件绑定，只保留表单submit监听，避免逻辑冲突。
• 提交事件中添加e.preventDefault()，阻止默认表单提交行为，防止页面刷新中断AJAX请求。
• 修正AJAX数据传递，封装选中的文本和值，解决原代码中data未定义的错误。
• 下拉框change事件直接调用工具函数，弹窗显示最新选中的文本。

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