使用jquery填充下拉列表

Question

我正在尝试使用jquery和ajax填充下拉列表。

这是我的代码的样子。

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

这是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>";

  ?>

这只是将time.php上的列表放入我页面上的div时间。 有没有什么方法我可以按时间从列表中获取单个选项.php并将它们添加到我页面上的下拉列表中？

提前致谢。

Answer 1

尝试：

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

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将会返回

$ res = array（'a'，'b'，'v'）echo json_encode（$ res）;

Answer 3

如果成功回调中使用的数据变量是JSON或数组，则会更容易。

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

而html可能看起来像这样，我猜？

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