Question

我有以下HTML选择：

<select class="form-control" id="band_id" name="band_id">
  <option selected="selected" value="">Choose a band...</option>
  <option value="66">Adolfo Little</option>
  <option value="96">Aisha Bosco</option>
  <option value="90">Alize Glover</option>
</select>

我需要构建一个过滤器，其条件是#band_id，所以我创建了这个jQuery代码：

$("select#band_id").change(function (ev) {
    ev.preventDefault();
    var band_id = $('select#band_id');

    if (band_id.val() != undefined) {
        band_id.attr('selected', 'selected');
    }

    location.href = '/albums/bands/' + band_id.val();
});

因为location.href页面被重新加载并且URL发生了变化所以SELECT被重置并且我“松散”了所选的值。

我可以通过两种方式来解决这个问题：

使用我不想要的AJAX因为过于复杂而简单
从网址抓取band_id，然后设置我不知道如何实现的所选属性。

我不知道有没有其他方法可以实现这一目标。你还有其他想法吗？（如果有更好的例子）

Answer 1

您可以使用localStorage：

if (localStorage.getItem("band_id")) {
    $("select#band_id").val(localStorage.getItem("band_id"))
}  
$("select#band_id").change(function (ev) {
    ev.preventDefault();

    if ($(this).val() != undefined) {
        $(this).attr('selected', 'selected');
        localStorage.setItem("band_id", $(this).val());
    }

    location.href = '/albums/bands/' + $(this).val();
});

如果我们保存了值，请将select元素的值设置为该值一旦我们更改select元素中的值 - 将新值保存在localStorage中。

请注意，我删除了此示例中band_id的使用情况，因为它不需要。您可以在this功能中使用change。

我也不确定您更改selected属性的原因 - 您将用户立即重定向到新页面（此更改根本不起作用）。

如何在选项更改时选中该选项，我需要重新加载页面？

1 个答案: