title: jquery dropdown from mysql based on previous selection
body: <p><strong>EDIT 2</strong> Seemed it was a problem with a CSS class.</p>
  
  <p><strong>EDIT</strong> 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. </p>
  
  <p>Let me start out by saying I have very little jQuery experience and this is my first time dabbling with ajax. </p>
  
  <p>What I am trying to do is dynamically populate drop-down data based on the selection of the previous drop down. </p>
  
  <p>I have html that looks like this </p>
  
  <pre><code>        &lt;label for="employee_type"&gt;Employee Type&lt;/label&gt;
          &lt;select name="employee_type" id="employee_type"&gt;
                   &lt;option value="1" selected="selected"&gt;Team Member&lt;/option&gt;
                   &lt;option value="2"&gt;Supervisor&lt;/option&gt;
                   &lt;option value="3"&gt;Manager&lt;/option&gt;
             &lt;/select&gt;        
  
          &lt;label for="manager"&gt;Reports To&lt;/label&gt;
          &lt;select name="manager" id="manager_name"&gt;
                    &lt;option value="0" selected="selected"&gt;Please Select Employee Role&lt;/option&gt;
             &lt;/select&gt;                 
  </code></pre>
  
  <p>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.</p>
  
  <p>I have a MYSQL select string written with php that is outputing some json using <code>json_encode</code> the output of that is </p>
  
  <pre><code>[{"id":"2","first_name":"John","last_name":"Doe"}]
  </code></pre>
  
  <p>This is basicly just an array of all users and their names and id's to be shown in the array. </p>
  
  <p>Here comes the tricky part, the ajax. I found <a href="http://www.electrictoolbox.com/json-data-jquery-php-mysql/" rel="nofollow">this tutorial</a> which I've modified </p>
  
  <pre><code>    // 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()*/
  </code></pre>
  
  <p>This works about 78% of the way. It adds the correct options and value. Where it fails is that if I have  <code>$('option', select).remove();</code> (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...).</p>
  
  <p>Any help on this would be great!</p>