Question

我需要创建依赖的下拉列表。首先选择客户端。在下一个下拉列表中，它将显示属于所选客户端的项目列表。选择项目后，第三个下拉列表将过滤属于该项目的任务。我需要使用数据库中的一个表来执行此操作，而不使用主键外键关系。我的任务表有 1.客户名称 2.项目名称 3.任务名称这里有一个客户有多个项目一个项目有多个任务

也许我问的是一个非常简单的问题。但是如果不做这个部分，我就无法继续我的项目。请有人帮助我。这是我的表结构

Answer 1

如果您使用相同的表来存储客户端，项目＆amp;任务，因此您可能会创建更多重复记录，例如可能是项目名称重复或任务重复或客户名称....

虽然这取决于您的选择和方便..基本上，Ajax下拉（依赖下拉列表）是完全动作＆amp;基于Ajax。因此，您可以通过Ajax知道什么以及何时需要，然后您可以轻松构建这个...

以下是CodeIgniter Lovers的一个例子！：d

CodeIgniter控制器：

<?php // 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 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(); } } // 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]); } } /* End of file dropdown.php */ /* Location: ./application/controllers/dropdown.php */

CodeIgniter模型：

<?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); } // if record exist if ($query->num_rows() > 0) { // return all data as array return $query->result_array(); } else { // error return false; } } } /* End of file Dropdown_model.php */ /* Location: ./application/models/Dropdown_model.php */

CodeIgniter查看：

<!DOCTYPE html> <html> <head> <title>CodeIgniter: Dependent dropdown list by using single table value</title>  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <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"> <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'); // 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'); }); }); </script> </body> </html>

MySQL表：

id client_name project_name task ------ ------------------- ----------------- ------------- 1 Man Powers & Morans Web Micro Site Development 2 Mango vs Trees Brand Development Pitch 3 Man Powers & Morans Ecom Site Maintenance 4 Light One Ecom Site Maintenance 5 Mango vs Trees Siteground Development

MySQL表格结构：

Field Type Null Key Default Extra ------------ ----------- ------ ------ ------- ---------------- id int(11) NO PRI (NULL) auto_increment client_name varchar(85) YES (NULL) project_name varchar(85) YES (NULL) task varchar(85) YES (NULL)

Html查看屏幕截图：

Answer 2

我从你的问题中理解。您可能需要选择这样的选择字段

<label>Clints</label>
<select name="clint" id="clint" class="form-control" onchange="return get_projects(this.value)">
<option value="">Select Clint</option>                
<?php foreach($clients as $clint){?>
   <option value="<?php echo $clint->id?>"><?php echo $clint->name?></option>
<?php }?>
</select>
<label>Projects</label>
<select name="projects" id="projects" class="form-control" onchange="return get_tasks(this.value)">
   <option value="">All</option>
</select>
<label>tasks</label>
<select name="tasks" id="tasks" class="form-control">
   <option value="">All</option>
</select>

和像这样的脚本

function get_projects(clint_id) {
$.ajax({
    url: '<?php echo base_url();?>your controllef/your function/' + clint_id,
    success: function(response)

        jQuery('#projects).html(response);
    }
}); 
}
function get_tasks(project_id) {
$.ajax({
    url: '<?php echo base_url();?>your controllef/your function/' +project_id,
    success: function(response)
    {
        jQuery('#tasks).html(response);
    }
}); 
}

然后你需要像这样在控制器中创建函数

public function get_projects($clint_id)
{
    $project = $this->your_model->get_projects($clint_id);
    echo '<option value="">Select Project</option>';
    foreach($project as $row){          
        echo '<option value="' . $row->project . '" >' . $row->name . '</option>';
        }
}

public function get_tasks($project_id)
{
    $tasks = $this->your_model->get_tasks($project_id);
    echo '<option value="">Select Project</option>';
    foreach($tasks as $row){            
        echo '<option value="' . $row->task . '" >' . $row->name . '</option>';
        }
}

依赖下拉列表使用单个表值

2 个答案: