我总是将选定的选项文本作为选择框中的第一个值。如何使用 Javascript 从 HTML 选择框获取更改值

Question

我尝试了 stackoverflow 中的所有已知选项，仍然得到的值是“--select---”选择框中的默认/第一个选项。我的任务是获取警报消息中应包含的所选选项的文本。但它总是打印第一个选项的文本，

这是我的代码：

<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>

我收到的警报如下

Answer 1

您需要将“更改”事件侦听器更改为：

sel.addEventListener('change', function(e) {
  // get event target's value
  alert(e.target.value + ' - ' + e.target.selectedOptions[0].text);
});

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) {
  // get event target's value
  alert(e.target.value + ' - ' + e.target.selectedOptions[0].text);
});

$(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>