Codeigniter中的級聯下拉列表不起作用

Question

在我的一個視圖中，我有一個模式彈出窗口，其中包含2個下拉列表（ddlPublications和ddlEditions）。在頁面加載時，將填充ddlPublications，而ddlEditions將保持為空。

視圖

<div class="modal-body" style="height: 100%;">
    <div class="col-md-12">
        <div class="form-group">
            <label>Publication</label>
            <select id="ddlPublication" name="ddlPublication" class="form-control" onchange="load_editions(this.value)">
                <option value="0">--select--</option>
                <?php
                    foreach ($pub_data as $key => $pdata) {
                ?>
                    <option value="<?php echo $pdata['pub_id'];?>"> <?php echo $pdata['pub_title'];?> </option>
                <?php
                    }
                ?>
            </select>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
            <label>Edition</label>
            <div id="edn_div_data">
                <select id="ddlEdition" name="ddlEdition" class="form-control">
                    <option value="0">--Select--</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    function load_editions(pub_id){
        alert(pub_id);
        var p_id = pub_id;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>pmachine/pages/get_editions/"+pub_id,
            dataType: 'json',
            success: function(result){
                $("#edn_div_data").html(result);
            },
            error: function(result) {
                $("#edn_div_data").html("Sorry, something went wrong");
            }
        });
    }
</script>

控制器

public function get_editions($pubid)
{
    $data['edn_data'] = $this->Process_pages_model->pop_editions($pubid);
    echo json_encode($data);
}

問題

ddlEditions沒有被填充，它顯示消息``對不起，出了點問題''，請指出我的代碼有什么問題。

Answer 1

嘗試像這樣更改ajax pist函數和控制器：

$data['edn_data'] = $this-> Process_pages_model->pop_editions($_POST['pubid']);

阿賈克斯電話

     $.ajax({
         type: "POST",
         url: "<?php echo base_url(); ?>pmachine/pages/get_editions/" 
         data: {pubid: pub_id},
         dataType: "json",  
         cache:false,
            success: function(result){
                $("#edn_div_data").html(result);
            },
            error: function(result) {
                $("#edn_div_data").html("Sorry, something went wrong");
            }
        });

Answer 2

很難說出問題出在哪里，因為我看到它可能在幾個地方失敗了。 首先，請確保您已調試。 您可以使用內置的探查器https://www.codeigniter.com/userguide3/general/profiling.html，或者我相信您可以通過一些手動設置來使用xdebug。 現在讓我們調試。

1. 首先將ajax請求中的url替換為實際的url。 所以更換

   <?php echo base_url(); ?>pmachine/pages/get_editions/ <?php echo base_url(); ?>pmachine/pages/get_editions/帶有實際的URL，類似

   localhost/pmachine/pages/get_editions/

2. 嘗試創建一個簡單的ajax示例，以確保您對它有良好的處理。 這是一個有關基本php / ajax示例的問題，您可以將其用作參考：

   基本的PHP和AJAX

3. 嘗試回顯$ data ['edn_data']而不是僅回顯$ data。

4. 回顯一個字符串而不是$ data，以確保您甚至得到響應。

5. print_r（$ this-> Process_pages_model-> pop_editions（$ _ POST ['pubid']））; 以確保您從數據庫中獲取信息。 如果什么都沒得到，請確保使用基本連接測試連接到數據庫：

    // Create connection $conn = new mysqli($servername, $username, $password); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } echo "Connected successfully"; 

6. print_r（$ _ POST ['pubid']）; 確保您得到的帖子數據

7. 嘗試返回數據而不將其編碼為JSON，然后從ajax請求中刪除dataType:json 。

Answer 3

您的ajax成功函數將替換整個“ edn_div_data”，我懷疑您會在結果中重建DOM。

嘗試console.log結果，並假設結果為：

{"edn_data":[{"edn_id":"1","edn_title":"Edition 1"},{"edn_id":"2","edn_title":"Edition 2"},{"edn_id":"3","edn_title":"Edition 3"}]}

並替換您的ajax成功函數如下：

success: function(result){
    for (var i = 0; i <= result.edn_data.length - 1; i++) {
        $("#ddlEdition").append("<option value='"+result.edn_data[i].edn_id+"'>"+result.edn_data[i].edn_title+"</option>");
    }
},