首先，我想说有很多像这样的问题，这是一个重复的问题，但我试着通过查看其他代码自己做，但我在1小时后就放弃了。
我想要做的是根据另一个下拉列表中的选择填充下拉列表，但这两个下拉列表的选项都来自数据库。
我不知道jQuery，我也看到有些人使用onChange函数做我需要做的事情。
所以，我想解释一下我的问题。我有2个下拉菜单。其中一个包含学校名称，另一个包含课程代码。我需要做的是，我想根据您选择的学校显示课程代码。因为每所学校都有自己的课程。
这是第一次下拉列表。 foreach循环可能看起来令人困惑。我只是回应选项，但如果用户选择了学校，我会选择用户的学校。这就是我在那里发表其他声明的原因。
$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";
感谢您的帮助。
答案 0 :(得分：2)
在Stackoverflow上有一个附加了jsfiddle的例子： Populate one dropdown list based on the selection of other dropdown list
它的工作原理是创建一个已填充的选择和一个EMPTY选择：
<select id="cat">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="item">
</select>
第一个选择（Id = cat）附加了一个函数，它基本上是jquery的“onChange”方式：
(function() {
$('#cat').change(function(){
populateSelect();
});
});
所以每当你改变（即选择“id = cat”选择框的另一个项目时，它会调用下一个函数，然后使用新的“＆lt; option .... option＆gt;”填充另一个选择框“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>');
});
}
}
答案 1 :(得分：2)
当您在OPTION语句中回显时，为每种类型的课程代码提供唯一值，并在第二个选择框中为每个选项提供匹配的类。
选择框1将具有：
echo "<SELECT onchange='changeCourseCodes(this)'>"
echo "<OPTION value='UNIQUE1' name='Course Type 1'>"
//... more options, then close select
然后一定要给第二个选择框提供一个ID，显示更改值：
echo "<SELECT id='courseCodes'>"
echo "<OPTION class='UNIQUE1'>"
// options, end select, etc.
对于jQuery，你可以只显示一个OPTION类型，用css隐藏其余部分，并在更改选项时使用此命令隐藏/显示其他列表。
<script>
function changeCourseCodes(selectedOption)
{
var classType = $(selectedOption).val(); // get the selected class type
$('#courseCodes > OPTION').hide(); // hide all options
$('.' + classType).show(); // show just the chosen ones
}
</script>
这是未经编码的代码，在黑暗中刺伤。沿着这些方向的东西将完成它。
答案 2 :(得分：2)
我对ajax服务器端编码不太确定，但我可以告诉您如何从select获取加载数据。
假设您有2 <select class='school'>
<option value="sc1">school1</option>//Place your school codes in value for option
<option value="sc2">school2</option>
<option value="sc3">school3</option>
</select>
<select class="course">
</select>
.school现在更改第一个下拉列表$('.school').on('change',function()
{
var selectedSchool=$(this).find('option:selected').val(); //Select the school code which is stored as value for option
$.ajax({
url:'/SomeFunction/', //Write a function in the server side which accepts school code as argument
type:'POST',
dataType:'json',//return type from server side function [return it as JSON object
contentType: "application/json",
data: JSON.stringify(selectedSchool), //Pass the data to the function on server side
success: function (data) { //Array of data returned from server side function
$.each(data,function(value){
$('course').append('<option>'+value+'</option>');
});
},
error:
function (data) {
//display any unhandled error
}
});
});
执行ajax调用，如下所示：
'+', '/'答案 3 :(得分：1)
我使用javascript实现了相同的功能。在我的情况下，输入是json。您只需将输入传递给onchange函数调用或在函数中使用ajax。
HTML
<table>
<tr>
<td>
<select onchange="f(event)">
<option value="" disabled selected style="display:none;">--Select--</option>
<option>Offshore</option>
<option>Onsite</option>
</select>
</td>
<td>
<select>
<option>------</option>
</select>
</td>
</tr>
<tr>
<td>
<select onchange="f(event)">
<option value="" disabled selected style="display:none;">--Select--</option>
<option>Offshore</option>
<option>Onsite</option>
</select>
</td>
<td>
<select>
<option>------</option>
</select>
</td>
</tr>
的Javascript
window.f=function(event){
onoffelem=event.target;
locelem=event.target.parentNode.nextSibling.nextSibling.children[0];
locelem.options.length=0;
offmap=JSON.parse('{"11":"Chennai","12":"Kolkatta"}');
onsitemap=JSON.parse('{"1":"USA","2":"Canada"}');
selectedVal=onoffelem.options[onoffelem.selectedIndex].text;
if(selectedVal=="Offshore"){
for(var key in offmap){
option = document.createElement( 'option' );
option.value = key;
option.text = offmap[key]
locelem.add(option);
}
}else{
for(var key in onsitemap){
option = document.createElement( 'option' );
option.value = key;
option.text = onsitemap[key]
locelem.add(option);
}
}
}