Question

我有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的方式。

如何解决此问题以使其更清晰并使第3个下拉列表填充？

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

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

Answer 2

我认为没有回应的原因在于你的＆＃34; getMainCategories＆＃34;功能。只需检查代码中的以下行：

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

所以请尝试上述变化。

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

2 个答案: