Javascript .load function returning unexpected result

Question

I'm having an issue with the .load function or one of the other functions. I'm doing a .change then a .load for an HTML select, but every time it returns the select tag with []. Here is a video on it.

http://gyazo.com/75a3f2b2da3f9f32b3943e512025e643

The Javascript code:

$(document).ready(function(){
    $("#ticket_dep").change(function(){
        $("#result").html('Retrieving ...');
        var selected = parseInt($('#ticket_dep').val());
        $("#result").load("<?=URL_CP?>includes/json.php?function=changeareaadmin",{'dep_id':selected});
    });
});

The HTML code:

<tr>
    <td class="col-md-4" align="right">Assign Ticket</td>
    <td class="col-md-8">
    <form>
        <div id="result"></div>
    </form>
    </td>
</tr>

And the PHP code:

case "changeareaadmin":
    if(isset($_POST["dep_id"])) {

        $display = "<select name='ladder' class='form-control pull-left'><option>sssweewfeffe</option></select>";           
        echo $display;
    }
    break;

Answer 1

The jQuery load function expects the server to return html but it appears that your server is returning json which I might expect from something called json.php.