1
下面的代码开发用于使用codeigniter创建四个依赖的下拉列表。四个下拉列表分别用于选择客户名称，项目，任务和任务成本。但只有前三个下拉列表的选项从数据库中获取。第三下拉列表中选择不从database.Also获取控制台日志中没有错误被示 控制器从属下拉列表不显示选项
<?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]);
}
}
}
?>
型号
查看
<!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>
请添加开发人员工具中显示的错误消息（如果有）或任何异常（如果有）。 – Girish
这是在控制台日志中显示的错误..“未捕获的SyntaxError：输入索引意外结束：110” – Dushee
关闭'projects.on'方法丢失，完整的js添加到答案中。核实。 – Girish