jquery 我总是在选择框中将所选的选项文本作为第一个值,如何使用JavaScript从HTML选择框中获取更改值

myss37ts  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(86)

我尝试了所有已知的选项从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>

我收到的警报如下

csga3l58

csga3l581#

您需要将'change'事件侦听器更改为:

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

这是JavaScript版本,或者使用JQuery,您可以使用change

$('#dbTable').change(function() {
    alert($(this).val() + ' - ' + $(this).find("option:selected").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>

相关问题