javascript - 使用 jQuery 多选将值添加到 url 哈希

Question

需要使用以下多选控件来更新包含以逗号分隔的 ID 列表的 url 哈希。

<select id="options" multiple>
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
    <option id="3">Option 3</option>
    <option id="4">Option 4</option>
    <option id="5">Option 5</option>
    <option id="6">Option 6</option>
    <option id="7">Option 7</option>
</select>

在下面的示例中，选项 2、3 和 4 在多选控件中被选中。在多选控件中选择和取消选择选项应该相应地更新 url 哈希。

http://localhost/index#options=2,3,4

我用多选控件创建了一个 fiddle ，但不知道如何最好地处理 url 哈希更改。我曾尝试使用 href 来更改哈希值，但在选项标签中不受支持，并且不提供相应地更新哈希值所需的逻辑。

Fiddle

如果我提供任何其他信息，请告诉我。

Answer 1

部分问题是在 JSFiddle 中您将看不到哈希。

也就是说，如果您监听 <select> 上的变化您可以使用 join() 将值数组连接成一个字符串然后使用 window.location.hash 将其设置为 has .

你可以这样(基于@popnoodles 代码)

$( '#options' ).on( 'change', function() {
    window.location.hash = $( this ).val().join( ',' );
});