CodeIgniter - зависит выпадающий Jquery и Ajax пост

Question

вид: learning_view.php

Вот это первый выпадающий который я заселение из базы данных.

<select name = 'category' id = 'category'> 
     <option value="">-- Select Category --</option> 
     <?php foreach($category as $item){ ?> 
     <option value="<?php echo $item->id_cat; ?>"><?php echo $item->name; ?></option> 
     <?php } ?> 
    </select> 
    <br><br> 

Я хочу, чтобы заполнить другое выпадающее меню, которое зависит от первого выпадающего списка. Для этого я использовал пост jQuery ajax.

второй выпадающий:

<select name = 'type' id = 'type'> 
     <option value="">-- Select Type --</option> 
     <?php foreach($type as $item){ ?> 
     <option value="<?php echo $item->id_type; ?>"><?php echo $item->name; ?></option> 
     <?php } ?> 
    </select> 
    <br><br> 

Ajax сообщение:

jQuery(document).ready(function(){ 
     $("#category").change(function() { 
     var category_id = {"category_id" : $('#category').val()}; 
     console.log(category_id); 

     $.ajax({ 
      type: "POST", 
      data: category_id, 
      url: "<?= base_url() ?>learning/dependent_dropdown", 

      success: function(data){ 

      $.each(data, function(i, data){ 
      console.log(data.name); 
      console.log(data.id_type) 
      }); 
      } 
     }); 
     }); 
    }); 

Контроллер: learning.php

public function dependent_dropdown() 
    { 
     if(isset($_POST['category_id'])) 
     { 
      $this->output 
      ->set_content_type("application/json") 
      ->set_output(json_encode($this->learning_model->getType($_POST['category_id']))); 
     } 
    } 

данные поступают из базы данных после Ajax пост, который я проверила

console.log(data.name); 
    console.log(data.id_type) 

в консоли.

Но не удалось выяснить, как использовать данные во втором раскрывающемся списке моего представления.

Я имею в виду, как я могу заполнить второе раскрывающееся меню данными, полученными после сообщения ajax.

Answer 1

Я нашел решение моей проблемы, изменяя функцию успеха Аякса поста:

success: function(data) { 
    $.each(data, function(i, data) { 
     $('#type').append("<option value='" + data.id_type + "'>" + data.name + "</option>"); 
    }); 
} 

Каких добавляемое значение в раскрывающийся список.

<select name="type" id="type"> 
    <option value="">-- Select Type --</option> 
</select> 

Я просто передал идентификатор блока выбора функции успеха сообщения ajax и добавил значение. Он работает, но есть проблема, которая возникает, когда я меняю выбор первого раскрывающегося нового значения, но значения, которые показывались для предыдущего выбора, не исчезают.

Answer 2

Сегодня я сделал то же самое. когда я вызываю url через ajax, я просто выполняю процедуру просмотра нагрузки и загружаю все данные в другой файл небольшого вида, содержащий только выбор и опцию, и запрос для отображения данных, а в основном представлении я создаю div с id # деление и просто на успех ajax я сделал

$('#divid').html(data); 

, и этот вид будет отображаться на главной странице.

надеюсь, что сделаю у понимания.

Answer 3

О функции успеха запишите этот код. Он добавит свои данные во втором раскрывающемся списке:

$.ajax({ 
    type: "POST", 
    data: category_id, 
    url: "<?= base_url() ?>learning/dependent_dropdown", 
    success: function(data) { 
     $.each(data, function(i, data) { 
      var opt = $('<option />'); 
      opt.val(data.id_type); 
      opt.text(data.name); 
      $('#your_second_dropdown_id_name').append(opt); 
     }); 
    } 
}); 

Answer 4

Вот некоторые модификации вашего ответа

success: function(data) 
{ 
    $('#type').html('<option value="">-- Select Type --</option>'); 

     $.each(data, function(i, data){ 
     $('#type').append("<option value='"+data.id_type+"'>"+data.name+"</option>"); 
     }); 
} 

Это покажет только новые элементы.

Answer 5

код вид:

<select id="category" name="prod_cat" class="form-control col-md-7 col-xs-12 category"> 
        <?php if($category) 
         foreach ($category as $cat) 
         { 
        ?> 
          <option value="<?php echo $cat->cat_id;?>"><?php echo $cat->cat_title; ?></option> 
        <?php 
         } 
        ?> 
       </select> 

код Ajax:

`

$(document).ready(function() { 
    $('.category').change(function(){ 
     $.ajax({ 
     type: "POST", 
     url: "<?php echo base_url();?>Product_admin/getSub", 
     data:{id:$(this).val()}, 
     beforeSend :function(){ 
     $(".subcat option:gt(0)").remove(); 
     $('.subcat').find("option:eq(0)").html("Please wait.."); 
     },       
     success: function (data) { 
      /*get response as json */ 
      $('.subcat').find("option:eq(0)").html("Select Subcategory"); 
      var obj=jQuery.parseJSON(data); 
      $(obj).each(function() 
      { 
      var option = $('<option />'); 
      option.attr('value', this.value).text(this.label);   
      $('.subcat').append(option); 
     }); 
      /*ends */ 
     } 
     }); 
    }); 
    }); 

`

Контроллер:

public function getSub() 
{ 
     $result=$this->db->where('cat_id',$_POST['id']) 
        ->get('tbl_subcategory') 
        ->result(); 
    $data=array(); 
    foreach($result as $r) 
    { 
     $data['value']=$r->subcat_id; 
     $data['label']=$r->subcat_title; 
     $json[]=$data; 


    } 
    echo json_encode($json); 

У меня тоже была такая же проблема .. Это то, что я did..Worked хорошо https://github.com/eboominathan/Dependent-Dropdown-in-Codeigniter-3.0.3