title: dynamically dropdown in nodejs mysql
body: <p>I want to change the region according to the clients when a user click and select a client then the region dropdown change according to the region that are related to that client from database<code>enter code here</code></p>
  
  <p><strong>Here is my client table:</strong>
  <img src="https://i.stack.imgur.com/yP4wb.png" alt="Here is my client table"></p>
  
  <p><strong>Here is my Region table in which client_id is the foreign key:</strong>
  <img src="https://i.stack.imgur.com/UBqlL.png" alt="Here is my Region table in which client_id is the foreign key"></p>
  
  <p>This is my 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;div class="container"&gt;
    &lt;h3&gt;Add Area&lt;/h3&gt;
  
    &lt;form action="/add_areas" method="POST"&gt;
     
      &lt;!--input type="text" placeholder="DistributorID" name="distributor_id"--&gt;
      &lt;input type="text" placeholder="Area Name" name="area_name" required=""&gt;
      &lt;!-- &lt;input type="text" placeholder="Contact ID" name="contact_id" required=""&gt; --&gt;
  
      &lt;!-- &lt;label&gt;Client ID&lt;/label&gt; --&gt;
      &lt;select name="client_id" required=""&gt;
       &lt;option disabled selected value&gt; -- select a Client  -- &lt;/option&gt;
       &lt;%for(i=0; i&lt;clients.length; i++){%&gt;
        &lt;option value="&lt;%= clients[i].id%&gt;"&gt;&lt;%= clients[i].client_name %&gt;&lt;/option&gt;
       &lt;%}%&gt;
      &lt;/select&gt;
  
      &lt;select name="region_id" required=""&gt;
       &lt;option disabled selected value&gt; -- select a Region  -- &lt;/option&gt;
       &lt;%for(i=0; i&lt;regions.length; i++){%&gt;
        &lt;option value="&lt;%= regions[i].id%&gt;"&gt;&lt;%= regions[i].region_name %&gt;&lt;/option&gt;
       &lt;%}%&gt;
      &lt;/select&gt;
      &lt;br&gt;
      
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;br&gt;
    &lt;%if(areas.length&gt;0) { %&gt;
     &lt;h3&gt;All Existing Areas&lt;/h3&gt;
     &lt;!--For view--&gt;
     &lt;div class="table-rsponsive"&gt; 
         &lt;table class="table table-striped table-bordered table-sm " cellspacing="0" width="100%"&gt;
          &lt;tr&gt;
           &lt;th&gt;Area Name&lt;/th&gt;
           &lt;th&gt;Client &lt;/th&gt;
           &lt;th&gt;Region &lt;/th&gt;
           &lt;th colspan="2"&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;% for(var i=0; i&lt;areas.length; i++) {%&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;%= areas[i].area_name %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= areas[i].client_name %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%= areas[i].region_name %&gt;&lt;/td&gt;
  
            &lt;td&gt;&lt;a href="/edit_areas/&lt;%= areas[i].id %&gt;"&gt;&lt;button class="btn-primary"&gt;Edit&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href="/delete_areas/&lt;%= areas[i].id %&gt;" onclick="javascript: return confirm('Are you SURE? If you delete this area All the town belongs to &lt;%= areas[i].area_name %&gt; area will automatically deleted!!');"&gt;&lt;button class="btn-danger"&gt;Delete&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;% } %&gt;
      &lt;/table&gt;
     &lt;/div&gt;
     &lt;% } 
     else{ %&gt;
     &lt;h3&gt;No Area Found!!&lt;/h3&gt;
    &lt;% } %&gt;
   
    &lt;!--goto dashboard button--&gt;
    &lt;button type="submit" class="btn btn-primary btn-block" onclick="window.location.href='/dashboard.html'"&gt;Return to dashboard&lt;/button&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here is the page to add area:</strong>
  <a href="https://i.stack.imgur.com/sS9YE.png" rel="nofollow noreferrer">Here is the page to add area</a></p>