javascript - 根据另一个下拉列表中的选择填充下拉列表

Question

首先我想说，像这样的问题有很多，而且这是一个重复的问题，但我尝试通过查看其他代码自己完成，但 1 小时后我放弃了。

我想要做的是根据另一个下拉列表中的选择填充下拉列表，但两个下拉列表的选项都来自数据库。

我不懂 jQuery，我也看到有些人使用 onChange 函数来完成我需要做的事情。

所以，我想解释一下我的问题。我有 2 个下拉菜单。其中一份包含学校名称，另一份包含类(class)代码。我需要做的是，我想根据您选择的学校显示类(class)代码。因为每个学校都有自己的类(class)。

这是第一个下拉列表。 foreach 循环可能看起来很困惑。我只是回显选项，但如果用户已经选择了学校，我会回显用户选择的学校。这就是为什么我有 if else 语句的原因。

$query_schools = "SELECT * FROM SCHOOLS ORDER BY SCHOOL_TYPE ASC";
$query_users = "SELECT USER_SCHOOL FROM USERS WHERE USER_ID = $user1_id";

$schools_result = mysqli_query($dbConnection, $query_schools);
$users_result = mysqli_query($dbConnection, $query_users);

while($data = mysqli_fetch_assoc($users_result)){ $user_school = $data['USER_SCHOOL']; }

foreach($schools_result as $school_result){
    if($user_school == $school_result['SCHOOL_NAME']){
        echo "<option value='$school_result[SCHOOL_SHORT_NAME]' selected>$school_result[SCHOOL_NAME]</option>";
    }else{
        echo "<option value='$school_result[SCHOOL_SHORT_NAME]'>$school_result[SCHOOL_NAME]</option>";
    }
}

这是第二个下拉菜单，它们很相似。

$query_programs = "SELECT * FROM PROGRAMS ORDER BY PROGRAM_CODE ASC";
$query_users = "SELECT USER_PROGRAM FROM USERS WHERE USER_ID = $user1_id";

$programs_result = mysqli_query($dbConnection, $query_programs);
$users_result = mysqli_query($dbConnection, $query_users);

while($data = mysqli_fetch_assoc($users_result)){ $user_program = $data['USER_PROGRAM']; }

foreach($programs_result as $program_result){
    if($user_program == $program_result['PROGRAM_CODE']){
        echo "<option value='$program_result[PROGRAM_CODE]' title='$program_result[PROGRAM_NAME]' selected>$program_result[PROGRAM_CODE]</option>";
    }else{
        echo "<option value='$program_result[PROGRAM_CODE]'>$program_result[PROGRAM_CODE]</option>";
    }
}

如果是纯 php，我应该对第一个查询这样做:

$query_programs = "SELECT * FROM PROGRAMS WHERE PROGRAM_SCHOOL = '$user_school' ORDER BY PROGRAM_CODE ASC";

感谢您的帮助。

Answer 1

在 Stackoverflow 上有一个附加了 jsfiddle 的示例: Populate one dropdown list based on the selection of other dropdown list

它的工作原理是创建一个已填充的选择和一个空的选择:

<select id="cat">
    <option val="car">car</option>
    <option val="phone">phone</option>
</select>
<select id="item">
</select>

第一个 select (Id=cat) 附加了一个函数，这基本上是 jquery 的“onChange”方式:

(function() {
      $('#cat').change(function(){
        populateSelect();
    });
});

因此，每当您进行更改(即选择“id=cat”选择框中的另一个项目时，它都会调用下一个函数，然后使用新的“”填充另一个选择框“id=item”值:

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

function populateSelect(){
    // get the value that was selected so we can populate the other one
    cat=$('#cat').val();
    // clear the other select box
    $('#item').html('');
    // now fill with new code depending on the slection
    if(cat=='car'){
        // this is jquery's way of a for loop
        cars.forEach(function(t) { 
            // $('#item') refers to the EMPTY select list
            // the .append means add to the object refered to above
            $('#item').append('<option>'+t+'</option>');
        });
    }
    elsif(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }
}