Question

以下代码开发使用codeigniter创建四个依赖的下拉列表。四个下拉列表分别用于选择客户端名称，项目，任务和任务成本。但是，只有前三个下拉列表的选项才能从数据库中获取。第三个下拉列表的选项无法从数据库中获取。此外，控制台日志中未显示任何错误的控制器

<?php
ob_start();
// security first always....
(defined('BASEPATH') or exit('No direct script access allowed'));
/**
 * Class Controller
 *
 * Class Dropdown Controller to handle login & logout
 */
class Dropdown extends CI_controller
{
    /**
     * Class Constructor
     */
    public function __construct()
    {
        // execute parent class constructor
        parent::__construct();
        // load model
        $this->load->model('Dropdown_model');
    }

    /**
     * Default method to execute if method name missing
     * @return [type] [description]
     */
    public function index(){
  $array_data = array();
  // only on Ajax Request
  if ($this->input->is_ajax_request()) {
      // if request for projects
      if ($this->input->post('action') && $this->input->post('action') == 'project') {
          // get client name
          $client     = $this->input->post('client', true);
          // get project data by client name
          $array_data = $this->Dropdown_model->get_dropdown_data(trim($client), 'project');
          // AjaxPOST JSON response
          //set page header json type
          $this->output->set_content_type('application/json');
          $this->output->set_output(json_encode($array_data));
      }
      // if request for task
      else if ($this->input->post('action') && $this->input->post('action') == 'task') {
          // get project name
          $project    = $this->input->post('project', true);
          // get task data by project
          $array_data = $this->Dropdown_model->get_dropdown_data(trim($project), 'task');
          // AjaxPOST JSON response
          //echo json_encode($array_data);die();
          //set page header type json
          $this->output->set_content_type('application/json');
          $this->output->set_output(json_encode($array_data));
      }
      else if ($this->input->post('action') && $this->input->post('action') == 'taskcost') {
          // get project name
          $task    = $this->input->post('task', true);
          // get task data by project
          $array_data = $this->Dropdown_model->get_dropdown_data(trim($task), 'taskcost');
          // AjaxPOST JSON response
          //echo json_encode($array_data);die();
          //set page header type json
          $this->output->set_content_type('application/json');
          $this->output->set_output(json_encode($array_data));
      }
  }else{
    //put all view part in else
    // else get all client data
    $array_data = $this->Dropdown_model->get_dropdown_data(null, null);
    // send to view
    $this->load->view('dropdown', ['data' => $array_data]);
  }

}
}
?>

模型

<?php
// No direct script execution
defined('BASEPATH') or exit('No direct script access allowed');
/**
 * Class Dropdown_model to handle all related information from MySQL
 */
class Dropdown_model extends CI_Model
{
    /**
     * MySQL table which contains all data about users
     * @var string
     */
    protected $table = 'task';
    /**
     * Returns, User First Name by Email ID
     * @param  [type] $email_addres   [description]
     * @return [type] [description]
     */
    public function get_dropdown_data($where_data = null, $type = null)
    {
        $query = '';

        // clients only
        if (is_null($type) && is_null($where_data)) {
            // desire column from table
            $this->db->select('cname');
            // only unique clients
            $this->db->distinct('cname');
            // mysql table
            $query = $this->db->get($this->table);
        }

        // projects by client
        elseif ($type == 'project' && !is_null($where_data)) {
            // desire column from table
            $this->db->select('projectname');
            // where clause
            $this->db->where('cname', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }

        // task by project
        elseif ($type == 'task' && !is_null($where_data)) {
            // desire column from table
            $this->db->select('task');
            // where clause
            $this->db->where('projectname', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }
        // task by project
        elseif ($type == 'taskcost' && !is_null($where_data)) {
            // desire column from table
            $this->db->select('taskcost');
            // where clause
            $this->db->where('task', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }

        // if record exist
        if ($query->num_rows() > 0) {
            // return all data as array
            return $query->result_array();
        } else {
            // error
            return false;
        }
    }
}

查看

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter: Dependent dropdown list by using single table value</title>
    <!-- load bootstrap css -->
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- load jquery library -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- load bootstrap js -->
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label for="name">Client</label>
            <select class="form-control" id="clients" name="clients">
                <option value="0">--Select Clients--</option>
                <?php if (isset($data)):?>
                    <?php foreach ($data as $key => $value): ?>
                        <option value="<?=$value['cname']?>"><?=$value['cname']?></option>
                    <?php endforeach ?>
                <?php endif ?>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Projects</label>
            <select class="form-control" id="projects" name="projects">
                <option value="0">--Select Projects--</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Tasks</label>
            <select class="form-control" id="tasks" name="tasks">
                <option value="0">--Select Tasks--</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Tasks</label>
            <select class="form-control" id="taskcost" name="taskcost">
                <option value="0">--Select Tasks--</option>
            </select>
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-primary" value="Submit">
        </div>
    </div>
    <script type="text/javascript">
  $(document).ready(function(){
    // client select box
    var client     = $('select#clients');
    // project select box
    var projects   = $('select#projects');
    // task select box
    var tasks      = $('select#tasks');
    var taskcost      = $('select#taskcost');
    // on change client name, get projects
    client.on('change', function () {
        // get selected client name
        var client_val = $(this).find('option:selected').val();
        // post data with CSRF token
        var data = {
            action:'project',
            client: client_val,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        // AjaxPOST to get projects
        $.post('.', data, function(json) {
            var projects_data = '<option value="0">--Select Projects--</option>';
            $.each(json, function(index, obj){
                projects_data += '<option value="'+obj.projectname+'">'+obj.projectname+'</option>';
            });
            // append all projects in project dropdown
            projects.html(projects_data);
        }, 'JSON');
    });
    // on change project, get task
    projects.on('change', function () {
        // get selected project name
        var project = $(this).find('option:selected').val();
        // AjaxPOSt wit CSRF
        var data = {
            action:'task',
            project: project,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        $.post('.', data, function(json) {
            var task_data = '<option value="0">--Select Task--</option>';
            $.each(json, function(index, obj){
                task_data += '<option value="'+obj.task+'">'+obj.task+'</option>';
            });
            // append all task data in Task dropdown
            tasks.html(task_data);
        }, 'JSON');
        taskcost.on('change', function () {
        // get selected project name
        var tasks = $(this).find('option:selected').val();
        // AjaxPOSt wit CSRF
        var data = {
            action:'taskcost',
            tasks: tasks,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        $.post('.', data, function(json) {
            var taskcost_data = '<option value="0">--Select Task--</option>';
            $.each(json, function(index, obj){
                taskcost_data += '<option value="'+obj.taskcost+'">'+obj.taskcost+'</option>';
            });
            // append all task data in Task dropdown
            tasks.html(taskcost_data);
        }, 'JSON');
    });
  });
</script>

</body>
</html>

Answer 1

您的JS中存在语法错误。缺少projects.on功能的关闭，添加它。整改的代码如下。

$(document).ready(function(){
    // client select box
    var client     = $('select#clients');
    // project select box
    var projects   = $('select#projects');
    // task select box
    var tasks      = $('select#tasks');
    var taskcost      = $('select#taskcost');
    // on change client name, get projects
    client.on('change', function () {
        // get selected client name
        var client_val = $(this).find('option:selected').val();
        // post data with CSRF token
        var data = {
            action:'project',
            client: client_val,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        // AjaxPOST to get projects
        $.post('.', data, function(json) {
            var projects_data = '<option value="0">--Select Projects--</option>';
            $.each(json, function(index, obj){
                projects_data += '<option value="'+obj.projectname+'">'+obj.projectname+'</option>';
            });
            // append all projects in project dropdown
            projects.html(projects_data);
        }, 'JSON');
    });
    // on change project, get task
    projects.on('change', function () {
        // get selected project name
        var project = $(this).find('option:selected').val();
        // AjaxPOSt wit CSRF
        var data = {
            action:'task',
            project: project,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        $.post('.', data, function(json) {
            var task_data = '<option value="0">--Select Task--</option>';
            $.each(json, function(index, obj){
                task_data += '<option value="'+obj.task+'">'+obj.task+'</option>';
            });
            // append all task data in Task dropdown
            tasks.html(task_data);
            }, 'JSON');
        });
        taskcost.on('change', function () {
        // get selected project name
        var tasks = $(this).find('option:selected').val();
        // AjaxPOSt wit CSRF
        var data = {
            action:'taskcost',
            tasks: tasks,
            "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
        };
        $.post('.', data, function(json) {
            var taskcost_data = '<option value="0">--Select Task--</option>';
            $.each(json, function(index, obj){
                taskcost_data += '<option value="'+obj.taskcost+'">'+obj.taskcost+'</option>';
            });
            // append all task data in Task dropdown
            tasks.html(taskcost_data);
        }, 'JSON');
    });
  });

请确认以上代码。

从属下拉列表不显示选项

1 个答案: