Как я могу проверить с внешнего интерфейса, является ли раскрывающийся список пустым, чтобы не показывать его?

Question

Я видел, что это может быть достигнуто с помощью AJAX, но я не очень знаком с ним, и я не уверен, как подойти к нему, так как мой HTML ограничен.

У меня есть форма, в которой есть выпадающие списки, зависящие от ForeignKey. Некоторые параметры в первом раскрывающемся списке приводят к тому, что у второго нет никаких параметров, и в этом случае я бы хотел, чтобы он не отображался без обновления страницы.

На моей странице есть запрос ajax отучебник о том, как сделать эти зависимые выпадающие списки, но я не мог понять, как создать запрос, чтобы проверить, является ли station_number пустым или нет, возможно, чтобы скрыть / показать из div, или что-то в этом родесортировать, не уверен, что это возможно

enter_exit_area.html

{% block main %}
    <form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
        {% csrf_token %}
        <div>
            <div>
                {{ form.adp_number.help_text }}
                {{ form.adp_number }}
            </div>
            <div>
                {{ form.work_area.help_text }}
                {{ form.work_area }}
            </div>
            <div>
                {{ form.station_number.help_text }}
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>
                <button type="submit" name="leave_area" value="Leave">Leave Area</button>
            </div>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $("#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);
                }
            });
        });
     </script>
{% endblock main %}

, включая load_stations из моего views.py в случае, если это полезно в любомway.

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})

station_number_dropdown_options.html

<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}

Answer 1

Как показано в коде, вы можете изменить свой JS следующим образом:

$("#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);
            // Check the length of the options child elements of the select
            if ($("#id_station_number option").length == 1) {
                $("#id_station_number").parent().hide(); // hide parent of the <select node (as your code, the <div> containing the input and the help_text)
            } else {
                // If any option, ensure the select is shown
                $("#id_station_number").parent().show();
            }
        }
     });
});

Как видите, проверка длины параметров внутри нужного выбора должна помочь.

Оператор else покажет выбор снова, если какая-либо опция присутствует, когда пользователь изменяет значение связанного хранилища.

---

Некоторые соображения

• Вы можете избежать создания <option value="">---------</option>, используя оператор forloop.first if в своем station_number_dropdown_options.html, если вы это сделаете, вы должны изменить проверку длины элемента <option на 0 вместо 1 в JavaScript

• Оцените, как использовать class Media в своей форме, чтобы включить связанные с ней сценарии (и CSS при необходимости), документы здесь -> https://docs.djangoproject.com/en/2.2/topics/forms/media/)

hopeэто поможет вам