我有两个下拉列表，其中包含我的SQL表中的完整信息。一个下拉列表由＆＃34;颜色组成。＆＃34;另一个下拉列表由特定颜色的成员组成。我已经将它们放在不同的optgroup中，基于它们的类值，即＃34;颜色。＆＃34;
我的目标是让用户选择＆＃34; COLOR＆＃34;并且只有该类中的成员才会显示在成员下拉列表中。
实施例。我在第一个下拉列表中选择了红色。只有＆＃34; Red＆＃34;将在第二次下拉列表中提供。
希望可以使用JavaScript
SQL表：
+-----------+--------------+
| GroupName | MemberName |
+-----------+--------------+
| Red | Joe Bob |
| Red | Catherine |
| Blue | Tommy |
| Orange | John Razks |
| Black | Trevor Smith |
+-----------+--------------+
+--------+
| Color |
+--------+
| Red |
| Blue |
| Orange |
| Black |
+--------+
PHP代码：
<?php
$conn = mysqli_connect("#Connecting");
if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
else{
$color_result = mysqli_query($conn, "SELECT * from Color order by Color ASC");
$colors = array();
while ($row = mysqli_fetch_assoc($color_result)){ $colors[] = $row['Color']; }
$member_result = mysqli_query($conn, "SELECT distinct MemberName,GroupName from Members order by MemberName ASC");
$members = array();
while ($row = mysqli_fetch_assoc($member_result)){
if(!isset($members[$row['GroupName']])){ $members[$row['GroupName']] = array(); }
$members[$row['GroupName']][] = $row; }
}
?>
<form id=#blah>
Color:
<select id="committee" name="committee">
<option value="">Select Color</option>
<?php
foreach($colors as $color){
echo "<option value=\"".$color."\">".$color."</option>";
}
?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">
Individual:
<select name="senator" id="senator">
<option value="">Select Individual</option>
<?php
foreach($members as $key => $member_group){
echo "<optgroup class=\"".$key."\">";
foreach($member_group as $val){
echo "<option value=\"".$val['MemberName']."\">".$val['MemberName']."</option>";
}
echo "</optgroup>";
}
?>
</select>
</div>
</form>
<form id=#id>
Color:
<select id="committee" name="committee">
<option value="">Select Color</option>
<?php
foreach($colors as $color){
echo "<option value=\"".$color."\">".$color."</option>";
}
?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">
Individual:
<select name="senator" id="senator">
<option value="">Select Individual</option>
<?php
foreach($members as $key => $member_group){
echo "<optgroup class=".$key.">";
foreach($member_group as $val){
echo "<option value=\"".$val['ValueName']."\">".$val['MemberName']."</option>";
}
echo "</optgroup>";
}
?>
</select>
</form>
答案 0 :(得分：0)
你可以使用这个帮助你的演示代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="firstmenu" name="City" onchange="select_other(this.value)">
<option value="Color1">Color1</option>
<option value="Color2">Color2</option>
<option value="Color3">Color3</option>
</select>
<br/>
<select id="secondmenu" name="zipCode">
<option value="Color1">Member1</option>
<option value="Color2">Member2</option>
<option value="Color3">Member3</option>
</select>
<script>
function select_other(value){
$("#secondmenu").children('option').hide();
$("#secondmenu").children("option[value^=" + value + "]").show();
$("#secondmenu").children("option[value^=" + value + "]").attr('selected',true);
}
</script>
答案 1 :(得分：0)
可以使用成员填充选项的值并在新选择中读出它们，但通过示例更容易：
HTML＆amp; PHP代码
当然你仍然可以使用你的数组，但我只想用“while（$ fetch = mysqli_fetch_assoc（$ query））”方式来做。它肯定看起来不太好，但这不是问题的一部分;）
// on the color select add this onchange
<select id="color" onchange="setOptions(this.value)">
<?php
$color_result = mysqli_query($conn, "SELECT * from color ");
while ($fetch_colors = mysqli_fetch_assoc($color_result)) {
$color = $fetch_colors['color'];
// This select is changed: WHERE GroupName='$color',
// so it just reads the members of the current color
$member_result = mysqli_query($conn, "SELECT distinct MemberName from Members WHERE GroupName='$color' order by MemberName ASC");
$memberstring = "";
$i=1;
$count_rows = mysqli_num_rows($member_result);
// Here just an string gets filled which will be the value of the option
while ($fetch_member = mysqli_fetch_assoc($member_result)) {
if ($count_rows==$i) {
$memberstring.=$fetch_member["MemberName"];
} else {
$memberstring.=$fetch_member["MemberName"].",";
$i++;
}
}
// This is the option with the color and with the value as members
echo "<option value=\"$memberstring\">".$color."</option>";
}
?>
</select>
<select id="members">
// In here the options will show up
</select>
JAVASCRIPT CODE
所以这是一个非常简化的javascript版本。意思是，它只是在颜色选项的每次更改时运行。如果你想要一个“清除”选项，你必须1.将它插入选择（也添加一个特殊值）2。在javascript函数中写一个if，检查选项是否清楚。
function setOptions(val) {
val = val.split(","); // val is now an array with all the members of the color
document.getElementById('members').innerHTML = ""; // This clears all "old" members of the select
var select = document.getElementById("members");
for (var i = 0; i < val.length; i++) { // Now for each Member in the array a new Option is created
var option = document.createElement("option");
option.text = val[i];
select.add(option);
}
}
更多链接： javascript add option， removing all options
如果您有任何疑问，请随时在评论部分询问我。