javascript - how to use a json function for filling combo box with database? -

i new @ html , trying relation between database.and want fill box database

i have code

<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> 

here

            <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> 

i want fill values , names of stations database

i have station function

function getstationlist() {     $db = new dbmanager();     $mysqli = $db->db_connect();      $query = "select stationid 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); } 

i tried use ajax function couldnt

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

js (page.html):

$(document).ready(function() {   $.ajax({     url:'stations.php',     type:'post',     data: 'q=' + str, // not sure need 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(); ?> 

quick explanation : when page.html loaded , ready, makes ajax call stations.php list of stations. on response, iterates on results , add option element each result select element have id "options".