使用 Codeigniter 在材料设计中进行 ajax 调用

Question

在我完成了这样的代码之后，我使用 Material Design lite 来构建项目，但相应的字段上没有显示任何结果。 这是我的代码，请看一下

<script>
$('#type').change(function(){
  var type=$('#type').val();
  alert(type);
  var url='<?php echo base_url(); ?>admin/vehicle/ajax_vehicle';
  alert(url);
  $.post(url, {type:type}, function(data)
  {  
    alert(); 
    componentHandler.upgradeDom();      
    $('#vehicle').html(data);
  });
});
</script>

这是我的控制器

public function ajax_vehicle()
{
    $data['vehicle']=$this->Vehicle_model->view_available_vehicles($_POST['type']);
    //var_dump($data['vehicle']);
    $this->load->view('admin/vehicle/ajax_vehicle',$data);
}

这是我的查看页面

<div class="input-field col s12">
      <select  required name="vehicle_id" id="vehicle">
       <option value=""  selected>Select</option>


      </select>
      <label>Select Vehicle</label>
</div>

var type=$('#type').val(); 正在获取价值。 当我安慰它时，我得到了这样的结果

 <select  required name="vehicle_id">
   <option value="">Select</option>
   <option value="42" >bullet</option>
   <option value="41" >pulsar</option>
</select>

这是我的ajax_vehicle，需要选择类型后显示这个的内容。

<select  required name="vehicle_id">
 <option value="">Select</option>
 <?php  if(empty($assign_vehicle_info)){
        if (!empty($vehicle)) {
        foreach ($vehicle as $veh) {?>
 <option value="<?= $veh->id ?>"<?php if (!empty($assign_vehicle_info)) { echo $assign_vehicle_info->vehicle_id == $veh->id ? 'selected' : ''; } ?>><?= $veh->name ?></option>
 <?php }}}?>
 </select>

其实不知道要添加什么额外的东西才能工作。请帮我解决

Answer 1

如果data 包含

<select  required name="vehicle_id">
   <option value="">Select</option>
   <option value="42" >bullet</option>
   <option value="41" >pulsar</option>
</select>

正如您所说，$('#vehicle').html(data); 的结果将是

<select  required name="vehicle_id" id="vehicle">
  <select  required name="vehicle_id">
   <option value="">Select</option>
   <option value="42" >bullet</option>
   <option value="41" >pulsar</option>
  </select>
</select>

如您所见，这是无意义且无效的 HTML。 html() 函数替换所选元素的 inner HTML，而不是元素本身。

你有两个选择：

1) 更改服务器输出（即 ajax_vehicle 视图），使其仅返回 <option> 元素 - 也无需返回 <select> 的外部部分。因此，从 ajax 调用返回的结果 data 只需包含（例如）：

<option value="">Select</option>
<option value="42" >bullet</option>
<option value="41" >pulsar</option>

那么你可以像以前一样继续使用$('#vehicle').html(data);。

或

2) 使用replaceWith，即$("#vehicle").replaceWith(data); 而不是.html()。但在这种情况下，您仍然需要修改服务器输出，以便 <select> 包含 id="vehicle" 标记，否则此代码将无法再次运行，因为名为“vehicle”的元素将不再存在。另请记住，如果您在“车辆”元素上设置了任何事件处理程序等，它们也需要重新创建，因为您已经替换了整个元素。见http://api.jquery.com/replacewith/

在我看来选项 1 是更好的选择。