链式下拉列表没有填充

Question

I'm working on a chained drop down to filter data. My first drop down is populating fine but the second does not seem to be working. I've been trying to find the issue for a bit now but to no avail. I'm using javascript to make the chain work.

Model

function get_sub_list(){
    $this->db->select('sub_name');
    $query = $this->db->get('subdivisions');

    if ($query->num_rows() > 0)
        {
            return $query->result();
        }else{
            return 'No Infom Found';
        }
}

function get_xings($subdivision){
    $this->db->select('Street');
    $this->db->where('RrSubDiv', $subdivision);
    $query = $this->db->get('xings');
    log_message('info', "Value of subdivision was $subdivision");
        if ($query->num_rows() > 0)
        {
            return $query->result_array();
        }else{
            return 'No Subs Found';
        }
}

View

<?php
        $subdivision = array('Choose a Sub');
        foreach($all_subs as $sub){
            $subdivision[$sub->sub_name] = $sub->sub_name;
        }

        echo form_label('Subdivision: ', 'subs');
        echo form_dropdown('subs', $subdivision, '', 'id="subdrop"');
        echo form_label('Xing: ', 'xings');
        echo form_dropdown('xing', array('Choose a State First'), '', 'id="xingdrop"');
        echo br(3);
        echo form_submit('zipsubmit', 'Get Data');

    ?>

</div>
<script type="text/javascript" src="<?php echo base_url(); ?>js/dropdown.js"></script>

Controller

public function multi_drop(){
        $this->load->model('Xings_model','',TRUE);
        $data['all_subs'] = $this->Xings_model->get_sub_list();
        $this->load->view('atis/create_xing', $data);
    }
    public function ajaxdrop(){
        if($this->_is_ajax()){
            $this->load->model('Xings_model','', TRUE);
            $subdivision = $this->input->get('subdivision', TRUE);
            $data['sub_xings'] = $this->Xings_model->get_xings($subdivision);
            //$this->load->library("security");
            //$data = $this->security->xss_clean($data);
                echo json_encode($data);
            }else{
                echo "Apperently is_ajax returned false!";
                show_error('This method can only be accessed internally.', 404);
        }
    }

    public function handle_submission(){
        $this->load->view('multi_response');
    }

    function _is_ajax(){
        return
    (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
    }

Javascript

(function() {
    var httpRequest;
    dropper =document.getElementById("subdrop");
    dropper.onchange = function() {
        makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
    };

    function makeRequest(url) {
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
    }
    if (!httpRequest) {
        altert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.setRequestHeader('X-Requested-With','XMLHttpRequest');
        httpRequest.send();
    }

    function alertContents(){
        if (httpRequest.readyState === 4) {
            if (httpRequest.Status === 200){
                var data = JSON.parse(httpRequest.response);
                var select = document.getElementById('xingdrop');
                if(emptySelect(select)){
                    for (var i = 0; i < data.sub_xings.length; i++){
                        var el = document.createElement("option");
                            el.textContent = data.sub_xings[i].Street;
                            el.value = data.sub_xings[i].Street;
                            select.appendChild(el);
                    }
                }
            }else{
                alert('There was a problem with the request.');
            }
        }
    }

    function emptySelect(select_object){
        while(select_object.options.length > 0){
            select_object.remove(0);
        }
        return 1;
    }
})();

Answer 1

Change .Status to .status at:

if (httpRequest.Status === 200){

Check this reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status

Update: I found an issue with the curly braces in your code.

This version should be work properly.

(function() {
  var httpRequest;
  dropper = document.getElementById("subdrop");
  dropper.onchange = function() {
    makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
  };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
  }
  if (!httpRequest) {
    altert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
  httpRequest.onreadystatechange = alertContents;
  httpRequest.open('GET', url);
  httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  httpRequest.send();

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        var data = JSON.parse(httpRequest.response);
        var select = document.getElementById('xingdrop');
        if (emptySelect(select)) {
          for (var i = 0; i < data.sub_xings.length; i++) {
            var el = document.createElement("option");
            el.textContent = data.sub_xings[i].Street;
            el.value = data.sub_xings[i].Street;
            select.appendChild(el);
          }
        }
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

  function emptySelect(select_object) {
    while (select_object.options.length > 0) {
      select_object.remove(0);
    }
    return 1;
  }
})();

Update 2: Use a Custom Helper XMLHttpRequest Function.

(function ()
{
    var httpRequest;
    var dropper = document.getElementById("subdrop");
    dropper.onchange = function ()
    {
        makeRequest(
        {
            url: 'localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value,
            type: 'GET',
            callback: alertContents
        });
    };
    function makeRequest(options)
    {
        httpRequest = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
        options.contentType = "application/x-www-form-urlencoded";
        httpRequest.open(options.type, options.url, options.async || true);
        httpRequest.setRequestHeader("Content-Type", options.contentType);
        httpRequest.setRequestHeader("X-Requested-With","XMLHttpRequest");
        httpRequest.send((options.type == "POST") ? options.data : null);
        httpRequest.onreadystatechange = options.callback;
        return httpRequest;
    }
    function alertContents()
    {
        if (httpRequest.readyState === 4)
        {
            if (httpRequest.status === 200)
            {
                var data = JSON.parse(httpRequest.response);
                console.log(data);
                var select = document.getElementById('xingdrop');
                if (emptySelect(select))
                {
                    for (var i = 0; i < data.sub_xings.length; i++)
                    {
                        var el = document.createElement("option");
                        el.textContent = data.sub_xings[i].Street;
                        el.value = data.sub_xings[i].Street;
                        select.appendChild(el);
                    }
                }
            }
            else
            {
                alert('There was a problem with the request.');
            }
        }
    }
    function emptySelect(select_object)
    {
        while (select_object.options.length > 0)
        {
            select_object.remove(0);
        }
        return 1;
    }
})();

Answer 2

I was missing a function to gather the data for the second drop down. Below is the correct model code. With the added function at the top.

    function get_xing_list(){
    $this->db->select('street');
    $query = $this->db->get('xings');

    if ($query->num_rows() > 0)
    {
      return $query->result();
    }else{
      return 'No Xings Found';
    }
}  

    function get_sub_list(){
        $this->db->select('subdname');
        $query = $this->db->get('subdivisions');

        if ($query->num_rows() > 0)
            {
                return $query->result();
            }else{
                return 'No Subs Found';
            }
    }

    function get_sub_xings($subdname){
        $this->db->select('street');
        $this->db->where('subdname', $subdname);
        $query = $this->db->get('xings');
        log_message('info', "Value of subdivision was $subdname");
            if ($query->num_rows() > 0)
            {
                return $query->result_array();
            }else{
                return 'No Subs Found';
            }