Question

我有两个下拉列表，其中包含我的SQL表中的完整信息。一个下拉列表由＆＃34;颜色组成。＆＃34;另一个下拉列表由特定颜色的成员组成。我已经将它们放在不同的optgroup中，基于它们的类值，即＃34;颜色。＆＃34;

我的目标是让用户选择＆＃34; COLOR＆＃34;并且只有该类中的成员才会显示在成员下拉列表中。

实施例。我在第一个下拉列表中选择了红色。只有＆＃34; Red＆＃34;将在第二次下拉列表中提供。

希望可以使用JavaScript

SQL表：

＆＃13;

+-----------+--------------+
| GroupName | MemberName   |
+-----------+--------------+
| Red       | Joe Bob      |
| Red       | Catherine    |
| Blue      | Tommy        |
| Orange    | John Razks   |
| Black     | Trevor Smith |
+-----------+--------------+

+--------+
| Color  |
+--------+
| Red    |
| Blue   |
| Orange |
| Black  |
+--------+

＆＃13;

PHP代码：

＆＃13;

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

＆＃13;

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>

Answer 2

可以使用成员填充选项的值并在新选择中读出它们，但通过示例更容易：

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

如果您有任何疑问，请随时在评论部分询问我。

PHP - 使用JS动态下拉类值

2 个答案: