title: Initial Dropdown Menu Table Population
body: <p>I was wondering if someone could help me solve this problem I have. I created a form that populates a table based on the selected name in a dropdown menu, however, when I initially load the page, since it is a for-loop and no option has been selected yet, the for loop runs through all the datapoints, populating the table with all the data for each name, but works fine once an option is chosen. I was wondering if someone could explain how I can get the initial page load to either show nothing or the values of one option, not everything at once until an option is chosen. Thanks for the help.</p>
  <pre><code>   &lt;form method=&quot;GET&quot; action=&quot;.&quot;&gt;
          &lt;div id=&quot;option-wrap&quot;&gt;
  
              &lt;select name=&quot;option-menu&quot; id=&quot;option-menu&quot;&gt;
                      &lt;option value=&quot;&quot; hidden disabled selected value id=&quot;option-filler&quot;&gt;Choose a Name&lt;/option&gt;
                  {% for l in options %}
                      &lt;option value=&quot;{{loans.company_name}}&quot;&gt;{{l.names}}&lt;/option&gt;
                  {% endfor %}
              &lt;/select&gt;
  
          &lt;button type=&quot;submit&quot; class=&quot;btn-filter&quot;&gt;Filter&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;card-items&quot;&gt;
  
  
              &lt;table class=&quot;main-items-table&quot;&gt;
                          &lt;tr&gt;
                              &lt;td class=&quot;menu-box-tab-items-identifiers&quot;&gt;Name:&lt;/td&gt;
  
                              {% for l in queryset %}
                              &lt;td class=&quot;menu-box-tab-items&quot; href=&quot;&quot;&gt;&lt;span&gt;{{l.name}}&lt;/span&gt;&lt;/td&gt;
                              {% endfor %}
  
                              &lt;td class=&quot;menu-box-tab-items-identifiers&quot;&gt;Sector:&lt;/td&gt;
  
                              {% for l in queryset %}
                              &lt;td class=&quot;menu-box-tab-items&quot; href=&quot;#6&quot;&gt;&lt;span&gt;{{l.sector}}&lt;/span&gt;&lt;/td&gt;
                              {% endfor %}
                          &lt;/tr&gt;
  
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>