首先我想说,像这样的问题有很多,而且这是一个重复的问题,但我尝试通过查看其他代码自己完成,但 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";
感谢您的帮助。
最佳答案
在 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”选择框中的另一个项目时,它都会调用下一个函数,然后使用新的“
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>');
});
}
}
关于javascript - 根据另一个下拉列表中的选择填充下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30316285/