我有以下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被重置并且我“松散”了所选的值。
我可以通过两种方式来解决这个问题:
我不知道有没有其他方法可以实现这一目标。你还有其他想法吗? (如果有更好的例子)
答案 0 :(得分: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
属性的原因 - 您将用户立即重定向到新页面(此更改根本不起作用)。