要设置选择选项的 URL 哈希

Question

我在由 3 个选择下拉列表组成的页面上有一个过滤器。选择每个下拉列表中的值后，该值将添加到 URL，因此它现在如下所示：

domain.com/page#filter-1=.class1&filter-2=.class2&filter-3=.class3&

筛选器-1是选择的 ID，因此筛选器-1=.class1 应在筛选器-1 选择中选择选项值 .class1，并且对于每个选择也是如此。但我就是不知道怎么做。

我在一个名为hashFilter的var中有我的URL哈希。

简化示例

<select class="filter_select" id="filter-1" role="group" data-filter-group="filter-1">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>  
</select>
<select class="filter_select" id="filter-2" role="group" data-filter-group="filter-2">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>  
</select>
<select class="filter_select" id="filter-3" role="group" data-filter-group="filter-3">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>  
</select>

我可以设置一个选择，例如：

jQuery("#filter-1").val('class-1');

但是我不知道如何使用多个选择动态执行此操作。 任何帮助，不胜感激。

谢谢。

Answer 1

如果需要特定过滤器的值，请在选择器中使用id属性

jQuery("#filter-1 option:selected").text()

如果需要所有筛选器的所有值，请使用选择器中的class属性

jQuery(".filter_select option:selected")

如果要根据 URL 从选择中动态选择一个值，则必须首先解析 URL，然后使用解析的值来设置选择。 例如：

# naievely parse the url
const map = window
.location
.hash
.slice(1,-1)
.split('&')
.reduce((map, element) => {
const [key, val] = element.split('=');
map[key] = val;
return map;
}, {})
# set selection
for (const [filterId, value] of Object.entries(map))
jQuery(`#${filterId}`).val(value);