Populate select box when document load

Question

im trying to populate a select box from values in my database after the document load, or ready. I'm new to ajax and jquery, Can someone help find what's wrong to my code?

                        <select class="form-control sec" id="sec" name="sec">
                              <option value="sec">Section</option>
                         </select>

here's my ajax code.

 function loadselectbox(){
                var fac_code = $("#faculty_code").val();
            $.ajax({    
              type: 'POST',                                  
              url: 'getrecords.php',                        
              data: {
                "load": 1,
                "fac_code": fac_code

              },                       
              dataType: 'json',                  
              success: function(data)         
              {
               var select = $("#sec"), options = '';

                for(var i=0;i<data.length; i++)
                   {
                    options += "<option value='"+data[i].section+"'>";              
                   }

                   select.append(options);
                  } 
            });
        }

here's my getrecords.php

if (isset($_POST['load'])) {
    $fac_code = $_POST['fac_code'];
      $select = mysqli_query($con,"SELECT * FROM tfile WHERE faculty_code = '$fac_code'");  
       while ($row = mysql_fetch_array($select)) {

    $result[] = array(
      'section' => $row['section'],
      'subj_descr' => $row['subj_descr']
    );

    }
    echo json_encode($result);
}

i call the function in document.ready

        $(document).ready(function() {

        loaddata();
        loadselectbox();

     });

Answer 1

Try this:

$(document).ready(function(){
var fac_code = $("#faculty_code").val();
    $.ajax({
        url: 'getrecords.php',                        
        type: 'POST',                                  
        data: {
            "load": 1,
            "fac_code": fac_code
        },
        success: function(response){    // response contains json object in it
            var data = JSON.parse(response);

            var options = '<option value=""></option>';
            for(var i=0;i<data.length; i++)
            {
                options += "<option value='"+data[i].section+"'> +data[i].subj_descr+ </option>";              
            }

            $("#sec").html(options);    // It will put the dynamic <option> set into the dropdown
        }
    });
});