問題描述

視圖:learning_view.php

view : learning_view.php

這是我從數據庫中填充的第一個下拉列表.

Here is the first dropdown which I am populating from database.

    <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 帖子.

What I want is to populate another dropdown which is dependent on the first dropdown. For that I have used the jQuery ajax post.

第二個下拉列表:

    <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

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

數據來自我檢查過的ajax帖子后的數據庫

The data is coming from the database after ajax post which I checked by

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

在控制臺中.

但無法弄清楚如何使用我視圖的第二個下拉列表中的數據.

But couldn't able to figure out how to use the data in the second dropdown of my view.

我的意思是如何使用我在 ajax 發布后收到的數據填充第二個下拉列表.

I mean how can i populate the second dropdown with the data i have received after ajax post.

推薦答案

我通過修改ajax帖子的success函數找到了解決我的問題的方法:

I found a solution to my problem by modifying the success function of the ajax post:

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

將值附加到下拉列表中.

Which append the value into the drop down.

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

我只是在ajax帖子的success函數中給了select塊的id，并附加了值.它可以工作，但有一個問題，即當我更改第一個下拉菜單的選擇時會出現新值，但為上一個選擇顯示的值并沒有消失.

I just gave the id of the select block into the success function of the ajax post and appended the value. It works but there is a problem which is when I change the selection of the first dropdown new value appears but the values which were showing for the previous selection doesn't go away.

這篇關于codeigniter - 依賴于 jquery 和 ajax post 的下拉列表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！