Django HTML Dropdown с фильтром нескольких значений

У меня есть нижеупомянутый выпадающий список с несколькими значениями для каждой опции

<div class="form-wrapper">
    <label>Fruits Selected</label>
    <input type="text" readonly class="form-control" id="fruits_selected" name="fruits_selected" value="{{fruits_selected.product}}" />
</div>
<div class="form-row last">
    <div class="form-wrapper">
        <label for="">Fruits Type</label>
        <select id="Fruits" name="Fruits" class="form-control">
            <option disabled="disabled" selected="selected">Choose option</option>
            <option value="Mango,Apple,Orange"> Fresh Fruits</option>
            <option value="Onion,Tomato"> Vegetable</option>
            <option value="Apple,Beetroot,Carrot"> Diet Fruits</option>
            <option value="Apple,Grapes"> Healthy Fruits</option>
            <option value="Tomato,Mango"> Juice Items</option>
        </select>
    </div>
</div>

Через Django я получу такие фрукты, как яблоко, апельсин. Если ввод в {{fruits_selected.product}} будет Apple, то в выпадающем списке мне нужно получить варианты Fresh Fruits, Diet Fruits, Healthy Fruits, поскольку значение выпадающего списка состоит из Apple

Аналогично, если опцией в {{fruits_selected.product}} является Tomato, то в выпадающем списке мне нужно получить опции Vegetable, Juice Items, поскольку значение выпадающего списка состоит из Tomato

вы можете сделать это в шаблоне, хотя на взгляд лучше сделать:

если у вас есть мультиселект:

{% with product=fruits_selected.product %} <-- Tomato? Fruits? -->
    <select id="Fruits" name="Fruits" class="form-control">
        <option disabled="disabled" {% if not prodict %}selected{% endif %}>Choose option</option>
        <option {% if product in "Mango,Apple,Orange" %}selected{% endif %} value="Mango,Apple,Orange"> Fresh Fruits</option>
        <option {% if prodict in "Onion,Tomato" %}selected{% endif %} value="Onion,Tomato"> Vegetable</option>
        <option {% if prodict in "Apple,Beetroot,Carrot" %}selected{% endif %} value="Apple,Beetroot,Carrot"> Diet Fruits</option>
        <option {% if prodict in "Apple,Grapes" %}selected{% endif %} value="Apple,Grapes"> Healthy Fruits</option>
        <option {% if product in "Tomato,Mango" %}selected{% endif %} value="Tomato,Mango"> Juice Items</option>
    </select>
{% endwith %}

если вы хотите удалить опции:

{% with product=fruits_selected.product %} <-- Tomato? Fruits? -->
    <select id="Fruits" name="Fruits" class="form-control">
        <option disabled selected>Choose option</option>
        {% if product in "Mango,Apple,Orange" %}<option value="Mango,Apple,Orange"> Fresh Fruits</option>{% endif %} 
        {% if prodict in "Onion,Tomato" %}<option value="Onion,Tomato"> Vegetable</option>{% endif %} 
        {% if prodict in "Apple,Beetroot,Carrot" %}<option value="Apple,Beetroot,Carrot"> Diet Fruits</option>{% endif %} 
        {% if prodict in "Apple,Grapes" %}<option value="Apple,Grapes"> Healthy Fruits</option>{% endif %} 
        {% if product in "Tomato,Mango" %}<option value="Tomato,Mango"> Juice Items</option>{% endif %} 
    </select>
{% endwith %}
Вернуться на верх