[PHP]コンボボックスとDBの連動[デモコード]

index.php

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

// コンボボックスの内容を設定

var year = new Date().getFullYear();

var month = new Date().getMonth() + 1;

var optionHtml = '';

for(var i = 0; i < 24; i++){

var y = year - Math.floor((month - 1 + i) / 12);

var m = (month + i) % 12;

if(m == 0){

m = 12;

y--;

}

optionHtml += '<option value="' + y + '-' + m.toString().padStart(2, '0') + '">' + y + '年' + m + '月</option>';

}

$('#ym_select').html(optionHtml);

// コンボボックスが変更されたら、選択された年月のデータを取得して反映

$('#ym_select').change(function(){

var ym = $(this).val();

$.post('get_data.php', {ym: ym}, function(data){

$('#empno_select, #dept_select').html('');

$.each(data, function(i, row){

$('#empno_select').append('<option value="' + row.empno + '">' + row.empno + '</option>');

$('#dept_select').append('<option value="' + row.dept + '">' + row.dept + '</option>');

});

}, 'json');

});

// 検索ボタンがクリックされたら、条件にあったデータを取得して反映

$('#search_button').click(function(){

var empno = $('#empno_select').val();

var dept = $('#dept_select').val();

var word = $('#search_word').val();

var ym = $('#ym_select').val();

$.post('search_data.php', {empno: empno, dept: dept, word: word, ym: ym}, function(data){

$('#result_table tbody').html('');

$.each(data, function(i, row){

var html = '<tr>';

html += '<td>' + row.empno + '</td>';

html += '<td>' + row.name + '</td>';

html += '<td>' + row.dept + '</td>';

html += '<td>' + row.age + '</td>';

html += '<td>' + row.salary + '</td>';

html += '</tr>';

$('#result_table tbody').append(html);

});

}, 'json');

});

</script>

</head>

<body>

<label for="search_word">検索ワード：</label>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

get_data.php

<?php

// PostgreSQLに接続してデータを取得して一時テーブルを作成する

$dsn = 'pgsql:host=localhost;dbname=mydb';

$user = 'myuser';

$password = 'mypassword';

try{

$dbh = new PDO($dsn, $user, $password);

$ym = $_POST['ym'];

$sql = "SELECT empno, dept FROM mytable WHERE ym = :ym";

$stmt = $dbh->prepare($sql);

$stmt->bindParam(':ym', $ym);

$stmt->execute();

$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

$stmt->closeCursor();

$dbh = null;

}catch(PDOException $e){

exit('データベースに接続できませんでした。' . $e->getMessage());

}

// 取得したデータをJSON形式で出力する

header('Content-Type: application/json');

echo json_encode($data);

search_data.php

$dsn = 'pgsql:host=localhost;dbname=mydb';

$user = 'myuser';

$password = 'mypassword';

try{

$dbh = new PDO($dsn, $user, $password);

$empno = $_POST['empno'];

$dept = $_POST['dept'];

$word = $_POST['word'];

$ym = $_POST['ym'];

$sql = "SELECT empno, name, dept, age, salary FROM mytable WHERE ym = :ym";

$params = array(':ym' => $ym);

if($empno != ''){

$sql .= " AND empno = :empno";

$params[':empno'] = $empno;

}

if($dept != ''){

$sql .= " AND dept = :dept";

$params[':dept'] = $dept;

}

if($word != ''){

$sql .= " AND (name LIKE :word OR note LIKE :word)";

$params[':word'] = '%' . $word . '%';

}

$stmt = $dbh->prepare($sql);

$stmt->execute($params);

$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

$stmt->closeCursor();

$dbh = null;

}catch(PDOException $e){

exit('データベースに接続できませんでした。' . $e->getMessage());

}

// 取得したデータをJSON形式で出力する

header('Content-Type: application/json');

echo json_encode($data);

get_yearmonths.js

function getYearMonths(){

var now = new Date();

var year = now.getFullYear();

var month = now.getMonth() + 1;

var ym = [];

for(var i = 0; i < 24; i++){

var m = month - i;

var y = year;

if(m <= 0){

m += 12;

y--;

}

if(m < 10){

m = '0' + m;

}

ym.push(y + '-' + m);

}

return ym;

}

// コンボボックスに年月を設定する

function setYearMonthOptions(){

var ym = getYearMonths();

var options = '';

for(var i = 0; i < ym.length; i++){

options += '<option value="' + ym[i] + '">' + ym[i] + '</option>';

}

document.getElementById('ym_select').innerHTML = options;

}

// 社員番号と所属のコンボボックスを設定する

function setEmpnoDeptOptions(data){

var empno_options = '';

var dept_options = '';

for(var i = 0; i < data.length; i++){

var empno = data[i]['empno'];

var dept = data[i]['dept'];

if(empno_options.indexOf(empno) == -1){

empno_options += '<option value="' + empno + '">' + empno + '</option>';

}

if(dept_options.indexOf(dept) == -1){

dept_options += '<option value="' + dept + '">' + dept + '</option>';

}

document.getElementById('empno_select').innerHTML = empno_options;

document.getElementById('dept_select').innerHTML = dept_options;

}

// テーブルにデータを反映する

function setResultTable(data){

var table = document.getElementById('result_table');

var tbody = table.getElementsByTagName('tbody')[0];

tbody.innerHTML = '';

for(var i = 0; i < data.length; i++){

var tr = document.createElement('tr');

tr.innerHTML = '<td>' + data[i]['empno'] + '</td>' +

'<td>' + data[i]['name'] + '</td>' +

'<td>' + data[i]['dept'] + '</td>' +

'<td>' + data[i]['age'] + '</td>' +

'<td>' + data[i]['salary'] + '</td>';

tbody.appendChild(tr);

}

// コンボボックスの値が変更されたらデータを取得する

function onChangeYearMonth(){

var ym = document.getElementById('ym_select').value;

var xhr = new XMLHttpRequest();

xhr.open('POST', 'get_data.php', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

var data = JSON.parse(xhr.responseText);

set

EmpnoDeptOptions(data);

setResultTable(data);

}

};

xhr.send('ym=' + ym);

}

// 検索ボタンがクリックされたらデータを取得する

function onClickSearch(){

var empno = document.getElementById('empno_select').value;

var dept = document.getElementById('dept_select').value;

var word = document.getElementById('word_input').value;

var xhr = new XMLHttpRequest();

xhr.open('POST', 'get_data.php', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

var data = JSON.parse(xhr.responseText);

setResultTable(data);

}

};

xhr.send('empno=' + empno + '&dept=' + dept + '&word=' + word);

}

// 初期処理

setYearMonthOptions();

onChangeYearMonth();