javascript - PHP - 使用 JS 动态下拉类值

Question

我有两个下拉菜单，其中包含 SQL 表中的完整信息。一个下拉菜单包含“颜色”。另一个下拉列表由特定颜色的成员组成。我已经根据它们的类值(“颜色”)将它们放在不同的 optgroup 中。

我的目标是让用户选择“COLOR”，并且只有该类别中的成员才会显示在成员下拉列表中。

例如。我在第一个下拉列表中选择红色。第二个下拉列表中仅显示“红色”成员。

希望可以使用 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>

Answer 1

您可以使用此演示代码来帮助您

<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>