title: How can I check from the frontend if a dropdown is empty to not show it?
body: <p>I was seeing this could be achieved using AJAX, but I'm not very familiar with it and I'm not sure how to approach it since my html is limited. </p>
  
  <p>I have a form, which has ForeignKey dependent dropdowns. Some of the options in the first dropdown cause the second to not have any options, in which case I'd like for it to not appear, without having to refresh the page.</p>
  
  <p>My page has an ajax request from a tutorial on how to make these dependent dropdowns, but I couldn't figure out how to create a request to check whether <strong>station_number</strong> is empty or not, to maybe hide/unhide from the div, or something of that sort, not sure what's possible</p>
  
  <p><strong>enter_exit_area.html</strong></p>
  
  <pre><code>{% block main %}
      &lt;form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate &gt;
          {% csrf_token %}
          &lt;div&gt;
              &lt;div&gt;
                  {{ form.adp_number.help_text }}
                  {{ form.adp_number }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ form.work_area.help_text }}
                  {{ form.work_area }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ form.station_number.help_text }}
                  {{ form.station_number }}
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;div&gt;
                  &lt;button type="submit" name="enter_area" value="Enter"&gt;Enter Area&lt;/button&gt;
                  &lt;button type="submit" name="leave_area" value="Leave"&gt;Leave Area&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $("#id_work_area").change(function () {
              var url = $("#warehouseForm").attr("data-stations-url");
              var workAreaId = $(this).val();
  
              $.ajax({
                  url: url,
                  data: {
                      'work_area': workAreaId
                  },
                  success: function (data) {
                      $("#id_station_number").html(data);
                  }
              });
          });
       &lt;/script&gt;
  {% endblock main %}
  </code></pre>
  
  <p>also including <strong>load_stations</strong> from my views.py in case it's helpful in any way.</p>
  
  <pre><code>def load_stations(request):
      work_area_id = request.GET.get('work_area')
      stations = StationNumber.objects.filter(work_area_id=work_area_id).order_by('name')
      return render(request, 'operations/station_number_dropdown_options.html', {'stations': stations})
  </code></pre>
  
  <p><strong>station_number_dropdown_options.html</strong></p>
  
  <pre><code>&lt;option value=""&gt;---------&lt;/option&gt;
  {% for station in stations %}
  &lt;option value="{{ station.pk }}"&gt;{{ station.name }}&lt;/option&gt;
  {% endfor %}
  </code></pre>