php codeigniter - 使用ajax

时间:2016-03-25 14:05:52

标签: javascript php ajax codeigniter

我正在开发一个模块,其中有两个下拉列表供用户选择,第二个下拉列表的值将根据第一个下拉列表自动填充,并从db获取值我正在使用AJAX

最初在页面加载时,将在第二个下拉位置(在id="model_inner_list"的span标记内)以只读模式显示一个文本框,这是第一个下拉值为0时的情况。

当第一个下拉列表的值更改为0以外时,span标记id="model_inner_list"文本框将被第二个下拉列表替换(填充来自db的值)

现在的问题是,当我将第一个下拉值更改回0时,带有id="model_inner_list"的span标记中的第二个下拉列表未被默认文本框替换。即,当第一次下拉的值为0时,第二次下拉应该被默认文本框替换。以下是我正在尝试的代码级详细信息

看下降情况

enter image description here

下拉列表中的HTML版本(包含在View文件中)



<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Make</span>
<select name="bv_vech_name_id" id="bv_vech_name_id" required="" class="form-control user-success" onchange="javascript:get_model_list(this.value)">
<option value="0">Select Vehicle Make</option>
<option value="1">HERO</option>
<option value="2">TVS</option>
<option value="3">SUZUKI</option>
<option value="4">BAJAJ</option>
<option value="5">HONDA</option>
<option value="6">YAMAHA</option>
<option value="7">MAHINDRA</option>
<option value="8">ROYAL ENFIELD</option>
</select>
</div>
<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Model</span>
<span id="model_inner_list">
<input type="text" class="form-control" value="Please Select Make" readonly="">
								  												</span>
</div>
&#13;
&#13;
&#13;

我使用下面的javascript函数使用AJAX调用php函数

&#13;
&#13;
function get_model_list(vm_vechile_id) {
  document.getElementById('model_inner_list').innerHTML = '<img src="<?php echo base_url();?>assest/img/loader_small.gif"/>';
  var url = '<?php echo base_url();?>index.php/order/get_model_list_ajax?vm_vechile_id=' + vm_vechile_id;
  $.post(url, function(result) {
    document.getElementById('model_inner_list').innerHTML = result;
  });
}
&#13;
&#13;
&#13;

AJAX调用的控制器函数

function get_model_list_ajax($vm_vechile_id = "", $ba_city = "") {
    if ($vm_vechile_id == '0') {
        echo '<input type="text" class="form-control" value="Please Select Make" readonly>';
    } else {
        $this->load->model('Order_model');

        if (!isset($_REQUEST['vm_vechile_id']))
            $_REQUEST['vm_vechile_id'] = $vm_vechile_id;
        if (!isset($_REQUEST['ba_city']))
            $_REQUEST['ba_city'] = "";
        $result = $this->Order_model->get_option_list_state('vechile_model', 'vm_vechile_id', $_REQUEST['vm_vechile_id']);
        $cat1[''] = 'Select Model';
        if ($result) {
            foreach ($result as $item) {
                $cat1[$item->vm_id] = $item->vm_model_name;
            }
        }
        if ($vm_vechile_id)
            return form_dropdown('bv_vech_model_id', $cat1, $ba_city, 'id="bv_vech_model_id"   class="form-control"');
        else
            echo form_dropdown('bv_vech_model_id', $cat1, $_REQUEST['ba_city'], 'id="bv_vech_model_id"    class="form-control"');
    }
}`

上面的Controller调用的模型函数

public function get_option_list_state($table_name = "", $field_name = "", $id = "") {
    $res = array();
    if ($id)
        $this->db->where($field_name, $id);
    $q = $this->db->get($table_name);
    if ($q->num_rows() > 0) {
        foreach (($q->result()) as $row) {
            $data[] = $row;
        }
        return $data;
    }
}

1 个答案:

答案 0 :(得分:2)

您可以像这样更改get_model_list功能:

function get_model_list(vm_vechile_id) {
  if ( vm_vechile_id > 0 ) {
      //ajax request goes here
  }
  else {
    document.getElementById('model_inner_list').innerHTML = '<input type="text" class="form-control" value="Please Select Make" readonly="">';
  }
}