Question

我使用下面给出的代码来创建使用单个表中的数据的从属下拉列表。第一个客户端被选中。然后第二个下拉列表显示与该客户相关的项目。选择项目时，第3个下拉列表显示与该项目相关的任务。到此为止，下拉列表正在运行。但在选择任务后，与该项目相关的任务成本不会显示。我检查网络控制台选项卡，但没有错误。有人能帮助我吗？ 下拉控制器

(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
                echo json_encode($array_data);die();
            }
            // if request for task
            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();
            }
            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();
            }
        }
        // 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]);
    }
}

Dropdown_model

<?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('client_name');
            // only unique clients
            $this->db->distinct('client_name');
            // 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('project_name');
            // where clause
            $this->db->where('client_name', $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('project_name', $where_data);
            // mysql table
            $query = $this->db->get($this->table);
        }
        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['client_name']?>"><?=$value['client_name']?></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 Task Cost--</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 = $(this).find('option:selected').val();
                // post data with CSRF token
                var data = {
                    action:'project',
                    client: client,
                    "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
                };
                // AjaxPOST to get projects
                $.post('./dropdown', data, function(json) {
                    projects_data = '<option value="0">--Select Projects--</option>';
                    $.each(json, function(index, obj){
                        projects_data += '<option value="'+obj.project_name+'">'+obj.project_name+'</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('./dropdown', data, function(json) {
                    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 taskcost 
                var taskcost = $(this).find('option:selected').val();
                // AjaxPOSt wit CSRF
                var data = {
                    action:'taskcost',
                    taskcost: taskcost,
                    "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
                };
                $.post('./dropdown', data, function(json) {
                    taskcost_data = '<option value="0">--Select TaskCost--</option>';
                    $.each(json, function(index, obj){
                        taskcost_data += '<option value="'+obj.taskcost+'">'+obj.taskcost+'</option>';
                    });
                    // append all task data in Task dropdown
                    $taskcost.html(taskcost_data);
                }, 'JSON');
            });
        });
    </script>
</body>
</html>

界面的屏幕截图

Answer 1

我自己找到了答案。视图页面应更改如下

$tasks.on('change', function () {
// get selected taskcost 
var task = $(this).find('option:selected').val();

// AjaxPOSt wit CSRF
var data = {
    action:'taskcost',
    task: task,
    "<?=$this->security->get_csrf_token_name()?>" : "<?=$this->security->get_csrf_hash()?>"
};

$.post('./dropdown', data, function(json) {
    taskcost = '<option value="0">--Select TaskCost--</option>';

    $.each(json, function(index, obj){
        taskcost += '<option value="'+obj.taskcost+'">'+obj.taskcost+'</option>';
    });

    // append all task data in Task dropdown
    $taskcost.html(taskcost);
}, 'JSON');
});

使用codeigniter的Json下拉列表

1 个答案: