如何使用json函数填充数据库的组合框?

时间:2013-05-08 21:01:34

标签: javascript mysql ajax database combobox

我是html的新手并试图在数据库之间建立关系。我想用数据库填充框

我有像

这样的代码
<div class="content" data-role="content" id="content" >
         <div id="car">
            <select name="selectCar" class="span12" id="Options" >
            <option value="-1">Bir istasyon seçiniz.</option>
            <option value="1">Mimarlık</option>
            <option value="2">Yurtlar</option>
            <option value="3">Bilgisayar Mühendisliği</option>
            <option value="4">Kimya Mühendisliği</option>
            <option value="5">Rektörlük</option>
            </select>           
         </div>
         <div id="cinfo"></div>

        <button onclick="javascript:callCarInfo.call(this,document.getElementById('Options').value);">Call Podcar</button>

      </div>

这里

            <option value="1">Mimarlık</option>
            <option value="2">Yurtlar</option>
            <option value="3">Bilgisayar Mühendisliği</option>
            <option value="4">Kimya Mühendisliği</option>
            <option value="5">Rektörlük</option>

我想用数据库

填写这些值和站名

我还有一个电台功能

function getStationList()
{
    $db = new DBManager();
    $mysqli = $db->db_connect();

    $query = "SELECT stationId FROM Station";

    $stmt = $mysqli->prepare($query);
    $stmt->execute();
    $result = $stmt->get_result();

    $list = array();

    while($row = $result->fetch_assoc())
    {
        $list[] = $row['stationId'];
    }

    return json_encode($list);
}

我尝试使用ajax函数,但我不能这样做

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

1 个答案:

答案 0 :(得分:2)

JS(page.html):

$(document).ready(function() {
  $.ajax({
    url:'Stations.php',
    type:'POST',
    data: 'q=' + str, // not sure you need that as you are not filtering on server side
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#myselect')
                  .append($('<option></option>', {text:value})
                  .attr('value', text);
        });
    }
  });
})

HTML(page.html):

<div class="content" data-role="content" id="content" >
         <div id="car">
            <select name="selectCar" class="span12" id="Options" ></select>           
         </div>
         <div id="cinfo"></div>
        <button onclick="javascript:callCarInfo.call(this,document.getElementById('Options').value);">Call Podcar</button>
</div>

Stations.php:

<?php
getStationList();
?>

快速说明:当page.html加载并准备好后,它会对Stations.php进行ajax调用以获取Stations列表。在响应时,它迭代结果并为每个结果添加一个选项元素到select元素,其中id为“Options”。