title: Javascript Form Select Change Options Dynamic List
body: <p>My project right now has two dropdown menu. One is with color and the other is with the members of that color. The goal is to use JS so if I select "Red", only members in red show up on the second dropdown. I have my SQL table below and my script. I am not sure where to start so some help would be nice. </p>
  
  <p>SQL:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>+--------+--------------+
  | Color  | MemberName   |
  +--------+--------------+
  | Red    | Joe Bob      |
  | Red    | Catherine    |
  | Blue   | Tommy        |
  | Orange | John Razks   |
  | Black  | Trevor Smith |
  +--------+--------------+
  
  +--------+
  | Color  |
  +--------+
  | Red    |
  | Blue   |
  | Orange |
  | Black  |
  +--------+</code></pre>
  </div>
  </div>
  </p>
  
  <p>PHP Code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Test Page&lt;/title&gt;
   &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?php
  function load_Color(){
   $conn=mysqli_connect("#variable");
   if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
   else{
   $output='';
   $sql = "SELECT * from Color order by Color ASC";
   $result = mysqli_query($conn, $sql);
   while($row=mysqli_fetch_array($result)){
    $output .= '&lt;option value="'.$row["Color"].'"&gt;'.$row["Color"].'&lt;/option&gt;';
   }
   return $output;
   }
  }
  ?&gt;
  &lt;div class="formatbody" id="formatbody"&gt;
     &lt;div class="category_div" id="category_div"&gt;Color:
      &lt;select id="color" name="color"&gt;
       &lt;option value=""&gt;Select Color&lt;/option&gt;
        &lt;?php echo load_Color(); ?&gt;
      &lt;/select&gt; 
     &lt;/div&gt; 
     &lt;div class="sub_category_div" id="sub_category_div"&gt;Individual: 
      &lt;select name="individual" id="individual"&gt;
       &lt;option value=""&gt;Select Individual&lt;/option&gt;
      &lt;/select&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
   $('#color').change(function(){
    var Color = $(this).val();
    $.ajax({
     url: "fetch.php",
     method: "POST",
     data:{color: Color},
     dataType: "text",
     success: function(data)
     {
      $('#individual').html(data);
     }
    });
   });
  });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fetch.PHP:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  &lt;?php
   $conn=mysqli_connect("#Variable");
   if(!$conn){ die("Connection Failed".mysqli_connect_error()); }
   else{
   $output='';
   $sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC";
   $result = mysqli_query($conn, $sql);
   $output = '&lt;option value=""&gt;Select the Individual&lt;/option&gt;';
   while ($row=mysqli_fetch_array($result))
   {
    $output .='&lt;option value="'.$row["MemberName"].'"&gt;'.$row["MemberName"].'&lt;/option&gt;';
   }
   }
   
   
   echo $output;
   ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>