鏈接下拉不填充

Question

我正在處理鏈接下拉以過濾數據。我的第一個下拉列表填充正常，但第二個似乎沒有工作。我一直在努力尋找這個問題，但是無濟於事。我正在使用JavaScript來使鏈工作。

型號

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'; 
     } 
} 

查看

<?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> 

控制器

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

我錯過了一個函數來收集第二個下拉數據。以下是正確的型號代碼。頂部添加了功能。

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'; 
      } 

Answer 2

更改.Status到.status在：

if (httpRequest.Status === 200){ 

入住此引用：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status

更新：我發現在你的代碼的大括號的問題。

此版本應該正常工作。

(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; 
    } 
})(); 

更新2：使用自定義的助手的XMLHttpRequest功能。

(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; 
    } 
})();