Populating a dropdown list with jquery

Question

I am trying to populate a drop down list using jquery and ajax.

Here's what my code looks like.

<script>
           $(document).ready(function(){                               //This script uses jquery and ajax it is used to set the values in
                $("#day").change(function(){                // the time field whenever a day is selected.

                      var day=$("#day").val();
                      var doctor=$("#doctor").val();

                      $.ajax({
                          type:"post",
                          url:"time.php",
                          data:"day="+day+"&doctor="+doctor,
                          success:function(data){
                             $("#time").html(data);
                             }
                      });

                });
           });
   </script>

Here's time.php

   //some code for connecting to database

 $doctor = $_POST['doctor'];

 $day = $_POST['day'];

$query="SELECT * FROM schedule WHERE doctor='" .$doctor."'AND day='" .$day. "'";

$result = mysqli_query($con, $query);

echo" 
<select name='timing' id='timing'>";
$i = 0;                                 //Initialize the variable which passes over the array key values

$row = mysqli_fetch_assoc($result);    //Fetches an associative array of the row
$index = array_keys($row);             // Fetches an array of keys for the row.

    while($row[$index[$i]] != NULL)
    {

        if($row[$index[$i]] == 1) {             
            $res = $index[$i];
            echo jason_encode($res);

            echo "<option value='"  . $index[$i]."'>" . $index[$i] . "</option>";
    }
    $i++;
    }       

    echo "</select>";

  ?>

This just puts list on time.php into a div time on my page. Is there some way I could grap individual options from the list on time .php and add them to a dropdown list on my page?

Thanks in Advance.

Answer 1

It would make it easier if the data variable that's used in the success callback is JSON or an array.

success:function(data)
{
    var option = $('#time');

    //Remove old options
    option.empty(); 

    //It makes it easier if you create an array to store all of the values that you want to
   //populate the select tag with. I'm not sure if the data that's returned is in the form of an array or not
   var newOptions = {'key1': 'value1','key2': 'value2', 'key3': 'value3'};  

   //Loop thru and change each option tag
   $.each(newOptions, function(key, value) {
       option.append($('<option></option>').attr('value', value).text(key));
   });
}

And the html might look something like this, I'm guessing?

<select id="time">
    <option value="val">Text</option>
    <option value="val">More Text</option>
</select>

Answer 2

<script>
       $(document).ready(function(){                               //This script uses jquery and ajax it is used to set the values in
            $("#day").change(function(){                // the time field whenever a day is selected.

                  var day=$("#day").val();
                  var doctor=$("#doctor").val();

                  $.ajax({
                      type:"post",
                      url:"time.php",
                      data:"day="+day+"&doctor="+doctor,
                      success:function(data){
                        var jdata=eval('('+data+')');;
                        var str='';
                        for(var i=0;i<jdata.length;i++)
                        {
                            str.='<option>'+jdata[i]+'</option>';
                        }
                         $("#time").html(str);
                         }
                  });

            });
       });

time.php will return like

$res=array('a','b','v') echo json_encode($res);

Answer 3

try:

success:function(data)
{
var option = '';
$.each(data.d, function(index, value) {
    option += '<option>' + value.YourReturnParam + '</option>';
    });
 $('#yourDdlID').html(option);
}