如果 url 查询字符串匹配,则设置选项 'selected'
Set option 'selected' if url query string matches
我有一个 select 框可以过滤页面上的数据库结果。每个选项的值都是查询字符串,以 ?然后是相应的 name/value 对特定选项 selected。像这样:
<select id="timeline-filter">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>
例如,当用户 select 的选项如 "Show Previewed":
时,我需要做两件事
1) 我需要将页面重定向到 http://example.com/results?l=Previewed
2) 我需要将 "Show Previewed" 的选项设置为 selected
,以便下拉列表指示这是当前过滤器。
我已经阅读了数十篇 jQuery 和 Javascript 文章,它们几乎达到了目标,但还不完全。我花了 3 个小时研究这个并尝试了各种方法,包括使用 Inspector 设置断点和观察变量,但我就是做不好。以下 HTML 和 jQuery 脚本完成了#1,但没有完成#2。
<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>
<script>
$(document).ready(function() {
var queryString = window.location.href.slice(window.location.href.indexOf('?')).split('?');
$("#timeline-filter > option").each(function() {
if (this.value == queryString[0]) {
this.selected = 'selected';
/* ALTERNATE POSSIBILITY -- DOESN'T WORK EITHER
$("#timeline-filter[value=this.value]").prop('selected',true)*/
}
});
});
</script>
你差不多了,试试这个:-
$(document).ready(function() {
var queryString = window.location.href.slice(window.location.href.indexOf('?'));
$("#timeline-filter > option").each(function() {
if (this.value == queryString) {
this.selected = 'selected';
}
});
});
对于您的替代方案,试试这个:-
var queryString = window.location.href.slice(window.location.href.indexOf('?'));
$("#timeline-filter > option[value='" + queryString + "']").prop('selected', true)
下面测试
var href = "dfgdfgg.html?l=Replaced"
$(document).ready(function() {
var queryString = href.slice(href.indexOf('?'));
$("#timeline-filter > option").each(function() {
if (this.value == queryString) {
this.selected = 'selected';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>
我有一个 select 框可以过滤页面上的数据库结果。每个选项的值都是查询字符串,以 ?然后是相应的 name/value 对特定选项 selected。像这样:
<select id="timeline-filter">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>
例如,当用户 select 的选项如 "Show Previewed":
时,我需要做两件事1) 我需要将页面重定向到 http://example.com/results?l=Previewed
2) 我需要将 "Show Previewed" 的选项设置为 selected
,以便下拉列表指示这是当前过滤器。
我已经阅读了数十篇 jQuery 和 Javascript 文章,它们几乎达到了目标,但还不完全。我花了 3 个小时研究这个并尝试了各种方法,包括使用 Inspector 设置断点和观察变量,但我就是做不好。以下 HTML 和 jQuery 脚本完成了#1,但没有完成#2。
<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>
<script>
$(document).ready(function() {
var queryString = window.location.href.slice(window.location.href.indexOf('?')).split('?');
$("#timeline-filter > option").each(function() {
if (this.value == queryString[0]) {
this.selected = 'selected';
/* ALTERNATE POSSIBILITY -- DOESN'T WORK EITHER
$("#timeline-filter[value=this.value]").prop('selected',true)*/
}
});
});
</script>
你差不多了,试试这个:-
$(document).ready(function() {
var queryString = window.location.href.slice(window.location.href.indexOf('?'));
$("#timeline-filter > option").each(function() {
if (this.value == queryString) {
this.selected = 'selected';
}
});
});
对于您的替代方案,试试这个:-
var queryString = window.location.href.slice(window.location.href.indexOf('?'));
$("#timeline-filter > option[value='" + queryString + "']").prop('selected', true)
下面测试
var href = "dfgdfgg.html?l=Replaced"
$(document).ready(function() {
var queryString = href.slice(href.indexOf('?'));
$("#timeline-filter > option").each(function() {
if (this.value == queryString) {
this.selected = 'selected';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="log">Show All</option>
<option value="?l=Previewed">Show Previewed</option>
<option value="?l=Edited">Show Edited</option>
<option value="?l=Downloaded">Show Downloaded</option>
<option value="?l=Replaced">Show Replaced</option>
<option value="?l=Deleted">Show Deleted</option>
</select>