CODEWITHSUNDEEP
javascriptjquery
Arkady
Arkady

Reputation: 393

Using jQuery multiselect to add values to url hash

The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.

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

In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.

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

I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.

Fiddle

Please let me know if I provide any additional information.

Upvotes: 2

Views: 504

Answers (2)

Popnoodles
Popnoodles

Reputation: 28419

Working demo

Ok without interfering with any of that plugin code

First you need to address your options

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

Then this jQuery will do what you want.

 $('#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;
 });

Upvotes: 0

unknowndomain
unknowndomain

Reputation: 985

Part of your issue is that in JSFiddle you won't be able to see the hash.

That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.

You could so something like this (based on @popnoodles code)

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

Upvotes: 1

Related Questions