Question

我正在使用python django和常规html格式所以我有一个非常特殊的情况，我有一个表格，它为食品程序构建“菜单” 在菜单中，它具有用餐类型：早餐，上午点心，午餐，晚餐等。每种餐点都有成分：谷物，蔬菜，水果，肉，饮料

一顿统一的膳食由食物和成分组成。当用户选择统一餐点（成分：肉和水果）

当我选择统一的餐食时，我该如何构建一种方法，它会根据统一餐食的项目自动填充表单中的肉类和水果字段。

我所有具有多对多字段的模型都是正确链接的，我只需要知道我可以采用哪种方法。

如果需要任何其他代码，请告诉我 page

<script type="text/javascript">
    $('#unitized').on('change', function(){
        var url = "{% url 'ajax_unitized_meals' %}"
        console.log($(this).val())
        var id = $(this).val()
        $.ajax({
            url : url,
            data: {'unitized' : id},
            success : function(data){
                console.log(data)
            }
        })
    });

</script>

<div id="mealpatterns">
    {% for mealtype,component in distinct_values.items %}
        <h2>
            Meal Type: {{mealtype}}
            <hr>
        </h2>
        {% if mealtype == 'Breakfast' or mealtype == 'Lunch' or mealtype == 'Supper' %}
        <h4>Unitized Meal</h4>
        <select id="unitized" class="select"  placeholder='choose unitized meal' class="form-control input-lg">
            {%for item in unitized%}
            <option value="{{ item.pk }}">{{item}}</option>
            {%endfor%}
        </select>
        {% endif %}
        {% for component in component %}
            <h4>

                <h4>Component: {{component}}</h4>

                <!-- carlos old loop -->
                {% comment %}
                {% if dictionary_components|get_item:v %}
                <select class="select"  placeholder='choose item' class="form-control input-lg" multiple>
                    <!-- these are the fields in that component AKA name -->
                    {%for x in dictionary_components|get_item:component %}
                        <option value="{{ item.pk }}">{{x}}</option>
                    {%endfor%}
                </select>
                {%endif%}
                {% endcomment %}
                <!-- end carlos old loop -->

            {% if component == 'Beverage' %}
            <select class="select" placeholder='choose beverage' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>

            {% endif %}

            {% if component == 'Fruit' %}
            <select class="select" placeholder='choose fruit' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Grain' %}
            <select class="select" placeholder='choose grain' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Vegetable' %}
            <select class="select" placeholder='choose vegetable' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Meat/Meat Alternative' %}
            <select class="select" placeholder='choose meat/meat alternative' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

        </h4>
        {% endfor %}
    {% endfor %}

    <!-- just leave this table tag here for selectize to work -->
        </table


</div>

<div id="start_here">
</div>

<script type="text/javascript">
    $(document).ready(function () {
    $('.select').selectize({
        sortField: 'text'
    });
});
</script>

def ajaxUnitizedMeals(request):
    unitized = request.GET['unitized']
    print(f'unitized before: {unitized}')
    unitized = prodModels.UnitizedMeals.objects.all().values()
    print(f'unitized meal: {unitized}')
    unitized = prodModels.UnitizedMeals.objects.filter(items__components__name=unitized)
    # print(f'unitized items: {unitized}')

Answer 1

我希望这会有所帮助。

创建一个视图以接收ajax请求并以HTML形式返回值（您也可以以JSON形式返回）。

更改统一餐点时调用ajax查询功能。

类似的东西：

如果“ unitized_meal”是您统一餐的ID

$('unitized_meal').change(function(){
$.ajax({
      url: "{% url 'view_name_here' %}",
      type: "POST",
      data: { unitized_meal: $("#unitized_meal").val(),
              //csrf token here for method POST
            },
      dataType: "html"
    });

}）

让我知道是否有帮助。

Ajax调用表单字段以自动填充其他字段

1 个答案: