使用 jQuery 在 CodeIgniter 中进行动态下拉选择答案

【问题标题】：Dynamic Dropdown Selections in CodeIgniter with jQuery使用 jQuery 在 CodeIgniter 中进行动态下拉选择
【发布时间】：2014-06-27 18:27:23
【问题描述】：

我有 3 个 HTML 下拉菜单。第一个下拉列表是静态的，接下来的两个依赖于前一个下拉列表。我的观点是这样的：

                   <div class="col-xs-3">
                          <label for="cat1"><h4>Main Category</h4></label>
                          <select class="form-control" name="cat1" id="cat1"
                           onchange="$('#secondary').load('<?php echo site_url('createplay/getMainCategories'); ?>?cat='+this.value);">
                            <?php
                            $sql = "SELECT DISTINCT level_one FROM categories";
                            $query = $this->db->query($sql);
                            foreach ($query->result() as $row) {
                              echo "<option value='".$row->level_one."'>".$row->level_one."</option>";
                            }
                             ?>
                          </select>
                      </div>
                      <div class="col-xs-4" id='secondary'>
                      </div>

                      <div class="col-xs-3" id='sub-secondary'>
                      </div>

SQL 仅在视图中帮助您了解我在做什么。我通常将它保存在模型中。 onchange 调用控制器/方法并将 HTML select 值传递给它。这里是getMainCategories：

public function getMainCategories() {
    $cat = $this->input->get('cat');
    $sql = "SELECT DISTINCT level_two FROM categories WHERE level_one='".$cat."'";
    echo '<label for="cat2"><h4>Secondary Category</h4></label>';

    $jquery = "$('#sub-secondary').load('".site_url('createplay/getSubSecondary')."?subcat='+this.value);";

    echo  '<select class="form-control" name="cat2" id="cat2" 
            onchange="'.$jquery.'">';

    $query = $this->db->query($sql);

    foreach ($query->result() as $row) {
        echo  '<option value="'.$row->level_two.'">'.$row->level_two.'</option>';
    }

    echo   '</select>';
}

现在第一个下拉菜单正确显示，当我进行选择时，第二个下拉菜单出现并正常工作。问题是当我在第二个下拉列表中进行选择时，第三个下拉列表没有出现。什么都没有发生，没有错误消息，什么都没有。我确信这是因为我从 PHP 脚本调用 jQuery 的方式。

我该如何解决这个问题以使其更干净并填充第三个下拉菜单？

【问题讨论】：

标签： php jquery mysql codeigniter

【解决方案1】：

最好的方法是，从第一个下拉列表中获取选定的值并将其传递给控制器（在 jquery 中使用 onchange 事件）。并在 ajax 响应中放置新的下拉菜单，这将是该控制器的结果。

类似这样的：

控制器：

$data['second_drop_down_data'] = // This will be the result of your
                                 // selected value from first drop down...
echo $this->load->view->('second_drop_down', $data, TRUE);

您可以对第三个和第四个下拉菜单应用相同的逻辑...

【讨论】：

我的方法有效，但我仍然不知道如何调用第三个下拉菜单。
你把你的第二个 ajax 函数放在哪里了？它应该在这个视图中->second_drop_down，而不是在你的主文件中
现在我有 3 个视图（带有静态下拉列表的主视图、带有 HTML 的第二个下拉列表的视图和第三个下拉列表的视图。）我在每个视图中都有 ajax .load 调用

【解决方案2】：

我认为没有响应的原因在于您的“getMainCategories”函数。只需检查代码中的以下行：

$jquery = "$('#sub-secondary').load('".site_url('createplay/getSubSecondary')."?subcat='+this.value);";

您还没有为 jquery 调用编写脚本开始和结束标记。所以响应正在创建下拉菜单，但 jquery 调用被视为 html 而不是脚本。

第二件事是当您动态创建 html 元素时，加载、单击等短方法不起作用。所以你必须像下面这样写：

$jquery = "$(document).on('load', '#sub-secondary',('".site_url('createplay/getSubSecondary')."?subcat='+this.value);";

所以请尝试上述更改。

【讨论】：