onchange提交，但保留第一个选择的选项

Question

因此，无论何时用户选择“ hightolow”和“ 1”，它通常都会重定向到sortby=hightolow&availability=1 。 但是，如果用户将可用性更改为0，它将重定向到availability=0 (sortby=lowtohigh&availability=0)依据的第一个且availability=0 (sortby=lowtohigh&availability=0)

我希望所选选项保持用户所选择的状态（即： sortby=hightolow&availability=0 ），最好的解决方案是什么？ 谢谢。

我使用express.js（node.js）作为后端解决方案。

<form method="GET" onchange="submit()">
  <label>Sort By</label>
  <div>
    <select name="sortby">
      <option value="lowtohigh">Price (Low to High)</option>
      <option value="hightolow">Price (Low to High)</option>
      <option value="new">Newest</option>
    </select>
  </div>

  <label>Availability</label>
  <div>
    <select name="availability">
      <option value="1">Available</option>
      <option value="0">Out of Season</option>
    </select>
  </div>
</form>

Answer 1

那是因为当您提交表单时，该值将返回到原始状态（默认为第一个元素），因此任何后续更改将仅反映到单个选择框，您可以让我知道您的后端是什么，因此我可以编写示例处理守则

希望能帮助到你！

编辑：对于express.js，您可以在处理程序中执行此操作（我这里未使用任何渲染中间件）

function(req, res) {
    var selection = [{
        name: "sortby",
        label: "Sort By",
        options: [
            { value: "lowtohigh", label: "Price (Low to High)" },
            { value: "hightolow", label: "Price (High to Low)" },
            { value: "new", label: "Newest" }
        ]
    }, {
        name: "availability",
        label: "Availability",
        options: [
            { value: "1", label: "Available" },
            { value: "0", label: "Out of Season" }
        ]
    }];

    var html = "";

    selection.forEach(function(select) {
        html += `<label>${select.label}</label>`;
        html += `<div><select name="${select.name}">`;
        select.options.forEach(function(opt) {
            var selected = (opt.value == req.query[select.name]) ? "selected" : "";
            html += `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
        });
        html += `</select></div>`;
    });

    res.send(`<form method="GET" onchange="submit()">${html}</form>`);
}