codeigniter - abhängig Drop-Down mit jquery und Ajax Post

Question

Ansicht: learning_view.php

Hier ist der erste Drop-Down, die ich aus der Datenbank bin bevölkern.

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

Was ich will, ist ein weiteres Drop-Down zu füllen, die auf der ersten Drop-Down-abhängig ist. Dafür habe ich den jQuery ajax post benutzt.

Sekunden Drop-Down:

<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 Beitrag:

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

Controller: 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']))); 
     } 
    } 

Die Daten werden aus der Datenbank nach Ajax-Post kommen, die ich geprüft von

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

in der Konsole.

Aber konnte nicht herausfinden, wie Sie die Daten im zweiten Dropdown meiner Ansicht verwenden.

Ich meine, wie kann ich das zweite Dropdown mit den Daten bevölkern, die ich nach Ajax Post erhalten habe.

Answer 1

ich eine Lösung für mein Problem durch Änderung der Erfolgsfunktion des Ajax-Post gefunden.

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

Ich gab nur die ID des Select-Block in die Erfolgsfunktion des Ajax Post und fügte den Wert hinzu. Es funktioniert, aber es gibt ein Problem, das ist, wenn ich die Auswahl des ersten Drop-Down-neuen Wertes ändert, aber die Werte, die für die vorherige Auswahl angezeigt wurden, nicht verschwinden.

Answer 2

Ich habe heute das Gleiche gemacht. wenn ich die url über ajax anrufe, mache ich einfach die load-view-prozedur und lade alle daten in eine andere kleine view-datei, die nur select und option statement enthält und eine query um daten anzuzeigen, und unter der hauptansicht erstelle ich ein div mit id # dIVID und einfach auf den Erfolg von ajax tat i

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

und diese Ansicht wird auf der Hauptseite angezeigt werden.

hoffentlich mache ich Sie verstehen.

Answer 3

Auf Erfolgsfunktion notieren Sie diesen Code. Es wird Ihre Daten in der zweiten Dropdown-Liste anhängen:

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

, die den Wert in der Dropdown anhängen:

$.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

Hier einige Änderung Ihrer Antwort

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

Es nur neue Objekte zeigen.

Answer 5

Ansicht Code:

<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-Code:

`

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

`

Controller:

Ich hatte auch gleiches Problem .. Das ist, was ich did..Worked gut https://github.com/eboominathan/Dependent-Dropdown-in-Codeigniter-3.0.3