Question

因此，每当用户选择“hightolow”和“1”时，它通常会重定向到sortby=hightolow&availability=1。但是，如果用户将可用性更改为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>`);
}

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

1 个答案: