在选择的选项上自动重定向 [英] Automatically redirect on option selected

问题描述

我通过提交按钮选择了以下内容.我真的很想让选择的选项重定向到我的路线，而无需按下提交按钮，这样我就可以摆脱它.

I have the following select with a submit button. I would really like for the option selected to redirect to my route without me needing to press a submit button, so I could get rid of it.

<form action="{{ url_for("perfumes.filters") }}" class="search-form">
    <div class="form-group">
        <label for="exampleFormControlSelect1">Filter by Type</label>
        <select class="form-control" id="filter_query" name="filter_query" onchange="checkSelected()">
            <option selected='true' name="" value="" id="">Please select a type</option>
            {% for type in types %}
            <option value="{{type['type_name']}}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>
            {% endfor %}
            <option value="{{ url_for('types.new_type') }}">Create new type...</option>
        </select><br>
        <button class="btn btn-primary btn-sm" type="submit">Submit</button>
    </div>
</form>

使用此功能，最后一个选项(创建新类型)已经重定向到其相应的路由.

The last option (Create New Type) is already redirecting to its corresponding route with this function.

function checkSelected() {
    const selected = document.getElementById("filter_query");
    const option = selected.options[selected.options.length - 1];
    if (option.selected == true) {
        window.location = option.value;
    }
}

调整该功能的最佳方法是什么，以便我可以压下提交"按钮并在选择时自动触发重定向?

What would be the best way to adapt that function so I can suppress the "Submit" button and have the redirect automatically triggered on selection?

更新:

这一切都在运行良好，但是当循环外选项被选中

This is all now working well, but I get a console error when the option outside the loop gets selected

<form  id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
    <div class="form-group">
        <label for="exampleFormControlSelect1">Filter by Type</label>
        <select class="form-control" id="filter_query" name="filter_query">
            <option selected='true' name="" value="" id="">Please select a type</option>
            {% for type in types %}
            <option value="{{ url_for('perfumes.filters', filter_query=type['type_name']) }}">{{type['type_name']}}</option>
            {% endfor %}
            <option value="{{ url_for('types.new_type') }}">Create new type...</option>
        </select><br>
        <button class="btn btn-primary btn-sm" type="submit">Submit</button>
    </div>
</form>

和脚本:

function checkSelected() {
    if (this.value) window.location = this.value;
}
const EL_select = document.querySelector("#filter_query");
EL_select.addEventListener("change", checkSelected);

推荐答案

如果我正确地提出了您的问题，则希望:

If I got your question correctly, you want to:

• 最后一个选项(值为"some/route" )应导航到该路线
• 所有其他选项(值不为空)应立即提交表单

如果这样，那么可能会有所帮助:

If so than this might help:

function checkSelected() {
  if (this.value === "some/route") return (window.location = this.value);
  if (this.value) this.form.submit();
}

const EL_select = document.querySelector("#filter_query");
if (EL_select) EL_select.addEventListener("change", checkSelected);

<form>
  <select class="form-control" id="filter_query" name="filter_query">
    <option selected value="">Please select a type</option>
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="etc">etc</option>
    <option value="xxx">Create new type...</option>
  </select>
</form>

PS:

• 停止使用嵌入式JS( onchange ="checkSelected()" )
• SELECT应该具有name属性，而不是OPTION元素

这篇关于在选择的选项上自动重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！