如何使用ajax select显示数据

Help me please,,I have problem to show data using ajax..I try change variable,,but thats not working enter image description here

view this

<form>
        <select name="status" onchange="showStatus(this.value)" class="form-control" style="width: 125px">
        <option value="">Pilih Status:</option>
        <option value="1">Lulus</option>
        <option value="0">Tidak Lulus</option>
        </select>
        </form>

ajax

  var status = $("#showStatus").change(function(){
  $.ajax({
      type:"POST",
      url:'<?php echo base_url("sales/status") ?>'+status,
      data:"salesstatus="+status,
      dataType:'json',
      success:function(data){
        $("#example1").html(data);
      },
      error:function(XMLHttpRequest){
        alert(XMLHttpRequest.responseText);
      }
  });
});

controller

public function status()
{
    $user=$this->session->userdata('user');
    $status = $this->view->post('showStatus');
    $this->load->view('v_header');
    $data = $this->modelsales->status($status); 
    $this->load->view($this->folder.'/view', $data);
    $this->load->view('v_footer');
}

Models

function status($s)
{
    $this->db->where('salesstatus',$s);
    return $query->result();
}

View All

Errors Description

first:<select name="status" onchange="showStatus(this.value)" class="form-control" style="width: 125px"> you didn't mention id here..

Second: var status = $("#showStatus").change(function(){ wrong way to get dropdown value

i have fixed these errors

<form>
        <select name="status" id="showStatus" class="form-control" style="width: 125px">
        <option value="">Pilih Status:</option>
        <option value="1">Lulus</option>
        <option value="0">Tidak Lulus</option>
        </select>
        </form>
<script type="text/javascript">
     $("#showStatus").change(function(){
        var status = $('#showStatus').val();
            alert(status);
  $.ajax({
      type:"POST",
      url:'<?php echo base_url("sales/status/") ?>'+status,
      data:"salesstatus="+status,
      dataType:'json',
      success:function(data){
        $("#example1").html(data);
      },
      error:function(XMLHttpRequest){
        alert(XMLHttpRequest.responseText);
      }
  });
});

         </script>

id is not defined firstly define id like this. and don't call function in select field. try this

<form>
    <select name="status" id="showStatus" class="form-control" style="width: 125px">
    <option value="">Pilih Status:</option>
    <option value="1">Lulus</option>
    <option value="0">Tidak Lulus</option>
    </select>
    </form>

and then you may try script like this

$('#showStatus').change(function(){
var status= $('#showStatus').val();
if(status){
$.ajax({
        url: '<?php echo base_url();?>sales/status/' + status,
        success: function(response)
        {
            jQuery('#example1').html(response);
        }
    });
}
});

Look like you are facing an issue with ajax response. Your call might not get response html. You should change controller code for ajax response.

$html = $this->load->view('v_header',array(),true);
$data = $this->modelsales->status($status); 
$html .= $this->load->view($this->folder.'/view', $data,true);
$html .= $this->load->view('v_footer',array(),true);

return $html; //echo $html;