javascript - 选择选项时自动重定向

Question

我有以下带有提交按钮的选择。我真的很想选择重定向到我的路线的选项，而我不需要按下提交按钮，所以我可以摆脱它。

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

最后一个选项（创建新类型）已经使用此函数重定向到其对应的路由。

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

调整该功能的最佳方法是什么，以便我可以抑制“提交”按钮并在选择时自动触发重定向？

更新：

现在一切都很好

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

标签： javascriptpythonflask

Answer 1

submit()您可以在选项更改时以编程方式调用方法。

const form = document.querySelector("form");
const select = document.querySelector("select");

select.addEventListener("change", (event) => {
  const value = event.target.value;
  console.log(value);
  form.submit();
})

<form id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
    <select name="filter_query" id="select">
      <option>Select Option</option>
      <option>Option 1</option>
      <option>Option 2</option>
    <select>
</form>