用于设置选择选项的 URL 哈希

Question

我在一个包含 3 个选择下拉列表的页面上有一个过滤器。当每个下拉列表中的一个值被选中时，它就会被添加到 URL 中，所以它现在看起来像这样：

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

filter-1 是 select 的 id，因此 filter-1=.class1 应该在 filter-1 select 中选择选项值 .class1 ，对于每个 select 也是如此。但我就是不知道怎么做。

我的 URL 哈希在一个名为 hashFilter 的变量中。

一个简化的例子

<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);