时间戳

首页 > 解决方案 > 下拉列表不起作用...未从数据库添加到列表的值以及选择显示输出的值以供显示

javascript - 下拉列表不起作用...未从数据库添加到列表的值以及选择显示输出的值以供显示

问题描述

我正在尝试使用 jquery on change 方法使用 ajax 调用从 mysql 数据库中获得的值填充下拉列表。然后，我尝试使用下拉框中的值将数据显示为更改事件的输出，但我不知道如何操作。有人可以指出我正确的方向。

      <jquery>
     $(document).ready(() => {
     window.onload = ajaxCallback;
     function ajaxCallback(data) {
      var data;
      var myOptions;
      var output;
      $.ajax({
        url: 'http://localhost:5000/alldata',
        type: 'GET',
        datatype: 'json',
        success: (data) => {
          //$.each(data, function (index, value) {

          var output = [];

          $.each(data, function(key, value) {

            output.push('<option value="'+ key +'">'+ value.Station 
          +'</option>');
          });

          $('#dmenu').html(output.join(''));
         }
       })
      }
     });

        $('#dmenu').on('change', function() { 

        alert( this.value );
        //alert($(this).find(":selected").value());

        function stationData(data) {

        var stationName = $(this).value();
        //var stationName = $(this).find(":selected").value()

        $.ajax({
        url: 'http://localhost:5000/alldata',
        method: 'POST',
        data: {
              station:stationName
              },

        success: (data) => {
          $.each(data, function (i) {


        data[i]

        //console.log(i);

        var station_loopOp = '';

        //console.log(JSON.stringify(data[i].Station));

        station_loopOp += '<li>ID: ' + JSON.stringify(data[i].ID) + '</li>' +
                     '<li>Station: ' + JSON.stringify(data[i].Station) + '</li>' 
                     +
                     '<li>Address: ' + JSON.stringify(data[i].Address) + '</li>' 
                     +
                     '<li>Sales: ' + 
                    JSON.stringify(data[i].Monthly_CStore_Sales) + '</li>' +
                     '<li>Operator: ' + JSON.stringify(data[i].Operator) + 
                     '</li>' +
                     '<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) + '</li>' 
                      +
                     '</<li>' + '<br/>';
                 });

               $('#optionT').html(station_loopOp);
            }
           });
          } 

         });


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<h3>Drop down Menu</h3>
    <select id="dmenu">
      <option selected = "selected" id="opt">Choose your station</option>
    </select>
    <div id="optionT"></div>

标签： javascriptjqueryhtmlajax

解决方案

在我看来，如果您的菜单中只有一个选项，那么“更改”事件将永远不会触发。当页面准备好或关闭不同的元素或事件时，我会运行 ajax 调用。

其次，你的optionVal变量什么都不做。

您需要在 ajax 回调中做更多类似的事情。

function ajaxCallback(data) {
  var myOptions;
  $.each(data, (i, v) = {
   var anStation = Station(v);
    myOptions.push(
      $("<option>")
        .prop('name', anStation.name)
        .prop('value', anStation.id));
  })
  $("#dmenu").append(myOptions);
}

推荐阅读