Django环境下多值选项下拉框的动态筛选需求

现有代码 #

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

需求 #

根据{{fruits_selected.product}}的值动态过滤下拉框选项：

• 当值为Apple时，仅显示包含Apple的选项：Fresh Fruits、Diet Fruits、Healthy Fruits
• 当值为Tomato时，仅显示包含Tomato的选项：Vegetable、Juice Items

解决方案1：Django后端模板渲染时过滤 #

适合页面加载时过滤条件固定的场景，直接在模板中通过条件判断控制选项渲染：

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

如果fruits_selected.product可能包含多个值（如Apple,Orange），可将判断逻辑改为'Apple' in target_product以适配。

解决方案2：前端JavaScript动态过滤 #

适合需要根据前端交互动态更新下拉框的场景，保留所有选项，在页面加载时根据输入框值筛选：

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const targetProduct = document.getElementById('fruits_selected').value.trim();
    const select = document.getElementById('Fruits');
    const originalOptions = [...select.options];

    // 重置下拉框，保留默认选项
    select.innerHTML = '<option disabled="disabled" selected="selected">Choose option</option>';

    if (!targetProduct) return;

    // 筛选包含目标水果的选项
    const filteredOptions = originalOptions.filter(opt => {
        if (opt.disabled) return false; // 跳过默认选项
        const values = opt.value.split(',');
        return values.includes(targetProduct);
    });

    // 添加筛选后的选项
    filteredOptions.forEach(opt => select.appendChild(opt));
});
</script>

内容的提问来源于stack exchange，提问作者Moses01