php - 如何用ajax函数填充组合框？

Question

我正在使用 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 代码时，我得到一个类似的输出；

[“汽车1”，“汽车2”，“汽车3”]

我想把这辆汽车 1、汽车 2、汽车 3 送到我的盒子我的 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> ..

Answer 1

如果您的 php 脚本 (Sations.php) 返回类似 ["car1","car2","car3"] 的数据

更新：循环中没有定义文本，它应该是值：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');
        });
    }
  });

Answer 2

首先，如果我穿着你的鞋子，我不会append因为each性能问题而使用

请修改attribute_name

我会做以下事情

$.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); 
    }
  });

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

我希望这可以帮助:)

Answer 3

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

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