jQuery ajax没有填充下拉列表

I have been wrecking my brain trying to get around this issue. I'm having trouble where a Select dropdown list is not being populated with the results returned based on a previous selection.

The relevant HTML code is as follow:

<div class="widget property_search">
    <form action="https://www.agentsforbidden.co.za/" id="searchproperty" name="searchproperty" method="get">
        <div class="search_frm_left clearfix">
            <div class="form_row clearfix advt-ptype">
                <span class="chkbox"><input type="radio" name="property_type" id="property_type_Sale" value="Sale" checked= checked><label for="property_type_Sale">&nbsp;Sale</label></span>
                <span class="chkbox"><input type="radio" name="property_type" id="property_type_Rent" value="Rent"><label for="property_type_Rent">&nbsp;Rent</label></span>
            </div>              <div class="form_row">
                <label>Keyword</label>
                <input type="text" value="" name="s" id="search_near-1135114534" class="searchpost" placeholder="" />
            </div>
            <div class="form_row clearfix">
                <label>Province</label>                 <div class="selectbox">
                    <select name="adv_zone" id="adv_zone" class="adv_zone">
                        <option value="">Select province</option>
                        <option value="5">Eastern Cape</option>
                        <option value="3">Free State</option>
                        <option value="6">Gauteng</option>
                        <option value="2">KwaZulu-Natal</option>
                        <option value="9">Limpopo</option>
                        <option value="7">Mpumalanga</option>
                        <option value="10">North West</option>
                        <option value="8">Northern Cape</option>
                        <option value="11">Western Cape</option>
                    </select>
                </div>
            </div>
            <div class="form_row clearfix">
                <label>City</label>                  <div class="selectbox">
                    <select name="adv_city" id="adv_city" class="adv_city">
                        <option value="">Select City</option>
                    </select>
                </div>
            </div>

The problem is that when I select the Province that the City drop down list is not getting populated. When I inspect the POST and return values with FireBug I can see that I am getting the response that is required (All the options for the dropdown) however it just simply doesn't get populated.

Here's the relevant jQuery Ajax bit:

jQuery(".adv_zone").live("change", function () {
    var e = jQuery(this),
        t = e.parents(".form_front_style").find(".adv_city"),
        i = jQuery(this).val();
    jQuery.ajax({
        url: ajaxUrl,
        type: "POST",
        data: "action=fill_city_cmb&state_id=" + i,
        success: function (e) {
            if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
            else {
                var i = t.find("option").first();
                t.next("span.select").text(i.text())
            }
        }
    })
})

And lastly the response (truncated due to already long post):

<option value="">Select City</option><option value="5651">Akasia</option><option value="5652" >Alberton</option><option value="5653">Albertynsville</option><option value="5654" >Alexandra</option><option value="12694" >Alphen Park</option><option value="5655">Alrapark</option><option value="5656">Alrode</option><option value="5657">Althea</option>

When the ajax is fired I can see that the following part is true and is executed:

if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");

I would GREATLY appreciate any insight as to why this is not working as expected.