jquery dropdown from mysql based on previous selection

EDIT 2 Seemed it was a problem with a CSS class.

EDIT Strange enough it works on the public side of the site by not the priviate. It must be a css or conflict with another plugin.

Let me start out by saying I have very little jQuery experience and this is my first time dabbling with ajax.

What I am trying to do is dynamically populate drop-down data based on the selection of the previous drop down.

I have html that looks like this

        <label for="employee_type">Employee Type</label>
        <select name="employee_type" id="employee_type">
                 <option value="1" selected="selected">Team Member</option>
                 <option value="开发者_开发技巧2">Supervisor</option>
                 <option value="3">Manager</option>
           </select>        

        <label for="manager">Reports To</label>
        <select name="manager" id="manager_name">
                  <option value="0" selected="selected">Please Select Employee Role</option>
           </select>                 

The Idea being that when an employee role or type is selected that the field below populates with all the managers who are higher up on the food chain.

I have a MYSQL select string written with php that is outputing some json using json_encode the output of that is

[{"id":"2","first_name":"John","last_name":"Doe"}]

This is basicly just an array of all users and their names and id's to be shown in the array.

Here comes the tricky part, the ajax. I found this tutorial which I've modified

    // attach a change handler to the form
  $("select#employee_type").change(function(){
   //get the mininimum employee level   
    var input = $("select#employee_type").val();
    //get the callback url
    var ajax_url = "/admin/employee/get_json/"+input;

   $.ajax({
      url:ajax_url,
      data:{ url:escape(ajax_url) },
      dataType:"json",
      success:function(data){ 
              var select = $('#manager_name');
        var options = select.attr('options');
              $('option', select).remove();

        $.each(data, function(index, array) {
                options[options.length] = new Option(array['first_name']+ " "+array['last_name'],array['id']);
        })
                },

            error:function(xhr,err,e){ alert( "Error: " + err ); }
    }); // $.ajax()
    return false;
  }); // .submit()*/

This works about 78% of the way. It adds the correct options and value. Where it fails is that if I have $('option', select).remove(); (which is nessarry to make sure the vaules don't get added each time the field changes) The field gets removed when I try to click on it. I also think it would be a nice touch to remove the selected option (Please Select...).

Any help on this would be great!

I'd suggest using .empty() instead of .remove() as that way you actually only delete the children of that element instead of the element itself.

success:function(data){ 
    var select = $('#manager_name');
        select.empty();

        $.each(data, function(index, array) {
               select.append(new Option(array['first_name']+ " "+array['last_name'],array['id']));
        })
},

I personally haven't used the new Option method, so I can't verify that it's correct.

A working solution should be http://jsfiddle.net/HffLg/10/