在更改时从数据列表中获取选定的值

Question

我正在使用一个填充了数据库调用的数据列表（来自 Bootstrap）。当用户从数据列表中选择一项时，我想确定选择了什么并根据该选择查询数据库。但是我如何找到选择的内容？我不希望用户必须点击提交按钮，我只想弄清楚他们选择了什么。

<form method="post" action="">
    <label for="medProcDataList" class="form-label">Medical Procedures with hospital codes</label>
    <input class="form-control" list="datalistOptions" id="medProcDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
      <!-- this is populated with 70 options that look like this
      <option value='216: Cardiac valve'>-->
    </datalist>
</form>

jquery:

var strMedProcedures = "";
var procCode, procDescription;
$.ajax({
        url: "php/getMedProcedures.php", //see this php page to see the db query
            //data: {},
            method: "POST",
            success: function(output) {
                 objMedProcedures = JSON.parse(output);
                
                 if (objMedProcedures.length > 0) {
                    for (var i=0; i< objMedProcedures.length; i++) {
                        procCode = objMedProcedures[i].procedure_codes;
                        procDescription = objMedProcedures[i].procedure_name;
                        strMedProcedures += "<option value='" + procCode + ": " + procDescription + "'>\n"; //build string of options
                    }
                    $('#datalistOptions').html(strMedProcedures); //populate datalist with the options
                 } 
                 return false;
                 
            },
            error: function(jxhr, statusText, err) {
                // Error, handle it
                console.log(statusText + " " + err);
            }
        });

$('#medProcDataList').change(function() {
    var $option = $(this).find(":selected").val();
    console.log($option); //returns 'undefined'
});

Answer 1

您只需要直接从#medProcDataList中获取值即可。您不必担心找不到 <option>

$('#medProcDataList').change(function() {

  var $selectedValue = $(this).val();

  console.log($selectedValue); //returns "216: Cardiac valve"
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<form method="post" action="">
  <label for="medProcDataList" class="form-label">Medical Procedures with hospital codes</label>
  <input class="form-control" list="datalistOptions" id="medProcDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <!-- this is populated with 70 options that look like this
      <option value='216: Cardiac valve'>-->
      <option value='216: Cardiac valve'>
  </datalist>
</form>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

在更改时从数据列表中获取选定的值

get selected value from datalist on change

jquery

bootstrap-4

datalist

html-datalist