依赖性下拉不起作用

Question

In this below code i have 2 dropdown in one dropdown i get course code from course subject table and in another drop relevant subject code for selected course code from course subject table should be displayed. But i cant get the dependent dropdown subject code .Pls any one help me.

Controller:student_site

function search_by_course()
{
  $this->load->model('subject_model');
  $id = $this->input->post('subject_id');

  //get your data from model
  $res_subject = $this->subject_model->subject_list($id);
  $html_string = "";
  $html_string .= "<select id='subject_code_id'>";
  for($x=0;$x<count($res_subject);$x++)
  {
     $html .= "<option id=".$res_subject[$x]->subject_id.">".$res_subject[$x]->subject_name."</option>";
  }
  $html_string .= "</select>";

  echo json_encode(array('html_string'=>$html_string));
}

model:student_model

function subject_list($id)
    {
        //echo "exam_name inside get_subject_records".$exam_name;
        //$this->db->select('course_code,subject_code');
        //$this->db->where('exam_name',$exam_name);
        $this->db->where('course_code',$course_name);
        $query = $this->db->get('coursesubject');
        return $query->result();
    }

view:student_detail_view

<td >

<?php 

        $js = 'class="dropdown_class" id="course_code_id'.$row->id.'"    '; 
        $js_name = 'course_code_id'.$row->id;
        echo form_dropdown($js_name, $data, $row->course_code, $js);

?>

</td>

<td>

<div class="subject"></div>
</td>

<script>
$(function(){
    $("#course_code_id").live("change keypress",function(){
       var id = 0;
       id = $(this).val();
       if( $(this).val() !==''){           
          $.post('<?php echo site_url('student_site/search_by_course') ?>',
            {
                subject_id: id
            },function(data){
                $(".subject").html( data['html_string']);

            },"JSON"
          );
       }
   });
});
</script>

Answer 1

Changes to do:
In view:

<div class="subject">
    <select id="subject_code_id"></select>
</div>

<script>
$(function(){
    $("#course_code_id").live("change", function(){
       var id = $(this).val();
       if( id != ''){           
          $.ajax({
                url     : '<?=base_url('student_site/search_by_course')?>',
                type    : 'POST',
                data    : { 'subject_id' : id },
                success : function(resp){
                    if( resp != "" ){
                        $("#subject_code_id").html('resp');
                    }else{
                        alert("No response!");
                    }
                },
                error   : function(resp){
                    alert("Error!");
                }
          });
       }
   });
});
</script>

In controller:

function search_by_course(){
    $this->load->model('subject_model');
    $id = $this->input->post('subject_id');

    //get your data from model
    $res_subject = $this->subject_model->subject_list($id);
    $html_string = "";
    //$html_string .= "<select id='subject_code_id'>";
    for($x=0;$x<count($res_subject);$x++)
    {
     $html .= "<option id=".$res_subject[$x]->subject_id.">".$res_subject[$x]->subject_name."</option>";
    }
    //$html_string .= "</select>";

    //echo json_encode(array('html_string'=>$html_string));
    echo $html_string;
}