getting data from query sql database to javascript

Question

I have a problem with my code.
case like this:
I have a dropdown, if selected \"personal\" it appeared the new dropdown that contains the data that is retrieved from

Answer 1

In javascript you have to make an ajax call to your php file:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("send2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","yourFile.php",true);
xmlhttp.send();

And in your php file you have to echo your data in JSON format:

echo json_encode(array('id'=>$id,'name'=>$name));

UPDATE in your case use the following code: (not tested)

php code:

<?php
    $query = mysql_query("select * from data where id_user = '$id_user' order by date asc");
    $i = 0;
    $options = array();
    while($data = mysql_fetch_array($query)){
       $options[$data['id']] =  $data['name'];
    }
    echo json_encode($options);
?>

javascript code:

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      var response = JSON.parse(xmlhttp.responseText);
      var select = '<select class='dropdown'>';

      for( var index in response ){
          select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
      }
      select += "</select>";
      document.getElementById("send2").innerHTML= select;
  }
}
function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {
       xmlhttp.open("GET","yourFile.php",true);
       xmlhttp.send();
   } 
   else { 
     $('#send2').html('');
   }
}

USING jQuery

javascript code:

function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {

       $.get("yourFile.php", function(data){
           var response = JSON.parse(data);
           var select = '<select class='dropdown'>';

           for( var index in response ){
               select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
           }
           select += "</select>";

           $("#send2").html(select);
       });

   } 
   else { 
     $('#send2').html('');
   }
}

Answer 2

The best way would probably be with an ajax call, anyway if you are declaring the script in the same page with the php, you can json encode the array with the options so that you will be able to access it into the javascript, like this:

var optionIds = <php echo json_encode($id); ?>
var optionNames = <php echo json_encode($name); ?>