Ajax呼叫响应未显示

I am trying to dynamically populate a select field in a form with an ajax request to my php based app. The code below shows the ajax request from the view / form javascript code

$(document).ready(function (){
    var clientDropDown = {
            load: function()
            {
                $.ajax({
                    'type': "post",
                    'url': "http://localhost/promptMe/index.php/main/fetchNames",
                    'data': "client",
                    'delay': 5000,
                    'success': function(result)
                    {
                        clientDropDown.attach(result);
                    },
                    'error': function()
                    {
                        alert("There's a problem!");
                    }
                });
            },
            attach: function(result)
            {
                result = $.parseJSON(result);
                $.each(result,function(id,obj){
                    var client = document.createElement('option');
                    client.setAttribute('value',obj.name);
                    client.text = obj.name;
                    $('select#client_name')[0].add(client);
                });
            }
    };
    clientDropDown.load();

});

The function handling this request in my controller is shown below

function fetchNames()
    {
        $entity_type = $this->input->post('data');
        $names = $this->model1->getEntityNames($entity_type);
        print json_encode($names);
    }

From the chrome browser developer tools I see a successful response with the json object at the top of a rendered view and none of the "names" are appended to my select element in my html which has the snippet below

<form method="post" action="receiveEntry" class="form">
<fieldset>
    <legend class="content-header">
        Job Details
    </legend>
    <div class="form-content">
        <div class="form">
            <label for="date">Date</label>
            <input type="date" placeholder="Job Date" id="date" name="date" title="Date Job was prepared" />
        </div>
        <div class="form">
            <label for="client_name">Client Name</label>
            <select name="client_name" id="client_name">

            </select>
        </div>
        <div class="form">
            <label for="description">Description</label>
            <textarea id="description" name="description" title="Description of Estimated Job" cols="40" rows="5" title="Description of job">Job Description</textarea>
        </div>....lots of other unnecessary form fields</fieldset></form>

I am using jQuery1.7.2.

Please can you tell me why I cannot get my select field populated with the returned json object's elements