我正在开发一个非常简单的课程目录。我正在使用动态选择下拉菜单来显示courses
特定对象提供的内容academy
。最初,我将显示courses available
这些选择菜单的完整列表,其中包含名为的mysql数据库表中的值courses_selection_list
。然后,我academy_id=15
通过标记值来选择提供的课程selected=selected
。在Jquery / JS中,您将看到我对文件进行了一次ajax调用,getCourses.php
然后在该文件加载页面时显示了选择菜单。
我的问题如下:我只能显示所提供课程的一个价值academy_id=15
。如何显示全部?还是有更好的方法呢?演示
<script>
var option = $('#courses_offered').val();
showFields(option);
function showFields(option){
var content = '';
for (var i = 1; i <= option; i++){
var content = '';
for (var i = 1; i <= option; i++){
(function(i) {
$.ajax({
type: "POST",
url: "getCourses.php",
data: {
value: option
},
success: function (data) {
content += '<div id="course_'+i+'">'
+'<label>Course # '+i+'</label><br />'
+'<label>Course Name:</label>'
+'<select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list">'
+'<option value="" >--- Select ---</option>"';
content += data;
content += '</select></div></br>';
$('#course_catalog').html(content);
}
});
})(i);
}
$('#course_catalog').html(content);
}
$('#course_catalog').html(content);
}
</script>
<select name="courses_offered" id="courses_offered" disabled>
<?php
$db_select2 = $db_con->prepare("
SELECT academy_id
FROM courses_by_academy
WHERE academy_id = :id
");
if (!$db_select2) return false;
if (!$db_select2->execute(array(':id' => $id))) return false;
$courses_count = $db_select2->rowCount();
echo "<option>----Select----</option>";
echo "<option value=\"1\"". (($courses_count=="1")?"selected=\"selected\"":"") .">1</option>";
echo "<option value=\"2\"". (($courses_count=="2")?"selected=\"selected\"":"") .">2</option>";
echo "<option value=\"3\"". (($courses_count=="3")?"selected=\"selected\"":"") .">3</option>";
echo "<option value=\"4\"". (($courses_count=="4")?"selected=\"selected\"":"") .">4</option>";
echo "<option value=\"5\"". (($courses_count=="5")?"selected=\"selected\"":"") .">5</option>";
?>
</select>
<div id="course_catalog"></div>
getCourses.php
-课程价值
$id = 15;
//get the course list
$course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list;");
$course_query->execute();
$data = $course_query->fetchAll();
foreach ($data as $row){
//select the courses being offered by academy_id=15
$option = "<option value='".$row["course_id"].":".$row["course_name"]."'";
$db_select = $db_con->prepare("
SELECT academy_id, course_name, course_id,
course_start_date, course_end_date
FROM courses_by_academy
WHERE academy_id = :id
");
if (!$db_select) return false;
if (!$db_select->execute(array(':id' => $id))) return false;
$results = $db_select->fetchAll(\PDO::FETCH_ASSOC);
if (empty($results)) return false;
foreach ($results as $value) {
$result= $value['course_id'];
if ($result == $row['course_id']) {
$option .= "selected='selected'";
}
}
$option .= ">". $row['course_name'] ."</option>";
//show result
echo $option;
}
Mysql表示例:
courses_selection_list
+-----------+-------------------------+
| course_id | course_name |
+-----------+-------------------------+
| 1 | Math |
| 2 | English |
| 3 | Science |
| 4 | Other- Not Listed |
| 5 | Social Studies |
| 6 | Home Mac |
| 7 | Business Management |
| 8 | Psychology |
| 9 | Accounting |
| 10 | Advanced Networks |
| 11 | Information Techonology |
+-----------+-------------------------+
courses_by_academy
+----+------------+--------------------------+-----------+------------+----------+
| id | academy_id | course_name | course_id | start_date |end_date |
+----+------------+--------------------------+-----------+------------+----------+
| 1 | 15 | Science | 3 |2013-12-04 |2013-12-25|
| 2 | 15 | Business Management | 7 |2013-12-04 |2013-12-25|
| 3 | 15 | Information Technology | 11 |2013-12-04 |2013-12-25|
+----+------------+--------------------------+-----------+------------+----------+
所需结果:
Javascript插入document.ready事件
var option = 3,
$course_catalog = $('#course_catalog');
showFields(option);
function showFields(option){
$course_catalog.html('');
// request only once
$.ajax({
type: "POST",
url: "getCourses.php",
async : false,
data: {
value : option
},
dataType : 'json',
contentType : 'application/json',
success: function (data) {
for (var i = 1; i <= option; i++){
// prepare select
$course_catalog.append('<div id="course_' + i + '"><label>Course # '+i+'</label><br />'
+'<label>Course Name:</label>'
+'<select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list">'
+'<option value="" >--- Select ---</option>"'
+'</select><br/><p id="date_'+i+'"></p></div></br>');
var $el = $course_catalog.find('#coursename_' + i),
val = 0,
index = 1;
for(var n in data) {
var o = data[n];
if (o.academy_id > 0) {
if (index == i) {
val = o.id + ':' + o.name;
$course_catalog.find('#date_'+i).html('Start at: ' + o.start_date + ' until '+o.end_date);
}
index ++;
}
$el.append('<option value="' + o.id + ':' + o.name + '">'+o.name+'</option>');
}
$el.val(val);
}
}
});
}
PHP代码:
header("Content-type: application/json");
$id = 15;
//get the course list
$course_query = $db_con->prepare("
SELECT
t.course_id, t.course_name, IFNULL(lj.academy_id, 0) as academy_id, lj.course_start_date, lj.course_end_date
FROM courses_selection_list as t
LEFT JOIN courses_by_academy as lj
ON (lj.course_id = t.course_id AND lj.academy_id = :id)
ORDER BY t.course_id
");
$course_query->execute(array(':id' => $id));
$data = $course_query->fetchAll();
$course_data = array();
foreach ($data as $row) {
$course_data[] = array(
"id" => $row["course_id"],
"name" => $row["course_name"],
"academy_id" => $row["academy_id"],
"start_date" => $row["course_start_date"],
"end_date" => $row["course_end_date"],
);
} // foreach ($data as $row) {
echo json_encode($course_data);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句