我正在开发一个非常简单的类(class)目录。我正在使用动态选择下拉菜单来显示特定学院提供的类(class)。最初，我在这些选择菜单中显示了 可用类(class) 的完整列表，其中的值来自名为 courses_selection_list 的 mysql 数据库表。然后，我通过标记值 selected=selected 来选择 academy_id=15 提供的类(class)。在 Jquery/JS 中，您会看到我正在对文件 getCourses.php 进行一次 ajax 调用。然后在页面加载时显示选择菜单。

我的问题如下:我只能显示 academy_id=15 提供的类(class)的一个值。我怎样才能显示它们？或者有更好的方法吗？ DEMO

courses_offering.php

<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 - 类(class)值(value)

$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);

关于javascript - 从 mysql 表中获取值并显示在下拉菜单中选择的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20810237/