选择选项时自动重定向

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

Answer 1

如果我没有正确回答您的问题，您希望：

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

如果是这样，这可能会有所帮助：

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

Answer 2

您可以在选项更改时以编程方式调用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>

Answer 3

我假设您希望在选择一个选项时重定向到某些 /filte_selected/<id> 类型的 URL。

你可以对option标签做如下修改：

<option value="{{ url_for('filter_selected', id=type['type_name']) }}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>

您可以将脚本更改为：

<script>
    function checkSelected() {
        var selectedValue = document.querySelector('#options').value
        if (selectedValue) {
            window.location = selectedValue;
        }
    }
</script>

Answer 4

您实际上可以直接从select 元素中提取所选值。然后，只需将用户重定向到该值。

function checkSelected() {
  const value = document.querySelector("#select-id").value;
  console.log(value);
  // window.location = value;
}

<select id="select-id" onchange="checkSelected()">
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
</select>