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

我已经创建了一个多选控件的小提琴，但不知道如何最好地接近url哈希更改。我已经尝试使用href来更改散列但是在选项标记中不支持，并且不提供相应更新散列所需的逻辑。

Fiddle

如果我提供任何其他信息，请与我们联系。

Answer 1

Working demo

好的，不会干扰任何插件代码

首先，您需要解决您的选择

use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>

然后这个jQuery会做你想要的。

 $('#options').on('change', function(){
     var val=$(this).val();
     if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
     else hash='';
     window.location.hash=hash;
 });

Answer 2

你的部分问题是在JSFiddle中你将无法看到哈希值。

如果您在<select>上监听更改，则可以使用join()将值数组连接到字符串中，然后使用window.location.hash将其设置为has。

你可以这样（基于@popnoodles代码）

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

使用jQuery multiselect将值添加到url hash

2 个答案: