如何用ajax函数填充组合框 - how to fill combobox with ajax function?

how to fill combobox with ajax function?

本文关键字：组合填充函数何用 ajax | 更新日期: 2023-09-27

我使用一个ajax函数来填充组合框。我有一个像这样的ajax代码。

$(document).ready(function() {
    alert();
  $.ajax({
    url:'Stations.php',
    type:'POST',
  //  data: 'q=' + str, 
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {                
                  .append($('<option></option>', {text:value})
                  .attr('value', text));
        });
    }
  });
});

和PHP代码是这样的。

function getStationList()
{
    $db = new DBManager();
    $mysqli = $db->db_connect();
    $query = "SELECT name FROM car";
    $stmt = $mysqli->prepare($query);
    $stmt->execute();
    $result = $stmt->get_result();
    $list = array();
    while($row = $result->fetch_assoc())
    {
        $list[] = $row['name'];
    }
    return json_encode($list);
}

当我编译我的PHP代码，我得到一个输出像;

["car1"、"car2","car3")

我想把这个car1 car2 car3发送到我的盒子我的HTML代码是

<div class="content" data-role="content" id="content" >
         <div id="car">
            <select name="selectSt" class="span12" id="selectSt" > 
            <option></option>
            <option></option>
            <option></option>
            </select>                                         
         </div>
         <div id="cinfo"></div>
        <button onclick="javascript:callCarInfo.call(this,document.getElementById('selectSt').value);">Call Podcar</button>
</div>
      <div class="footer" data-role="footer"><h1>IYTE PRT&copy;</h1></div>
   </div>

我不能用car1 car2和car3的值填充这个选项>/option>。

如果您的php脚本(jsp .php)返回像["car1"，"car2"，"car3"]这样的数据

Update: text在循环中没有定义，它应该是value: http://jsfiddle.net/6PEbe/1/

$.ajax({
    url:'Stations.php',
    type:'POST',
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {  
           $('<option></option>', {text:value}).attr('value', value).appendTo('#selectSt');
        });
    }
  });

首先，如果我在你的位置上，我不会在each中使用append来解决性能问题

请修改属性

我将执行以下操作

$.ajax({
    url:'Stations.php',
    type:'POST',
    dataType: 'json',
    success: function( json ) {
        var HTML = ""; 
        $.each(json, function(i, value) { 
           console.log("my val is"+value+" my key is"+i); 
           HTML = HTML+"<option>"+value+"</option>"; 
        });
        $('#selectSt').append(HTML); 
    }
  });

这是从性能角度来看的最佳实践

我希望这对你有帮助

在each回调函数中使用children()追加<option>标签:

$("#selectSt").children().append(valueYouWantToAdd);