将href链接到其他页面选择的下拉选项值

Question

Here is a question, which google dont seem to have answers. I have 2 pages : page-1 & page-2.

page-2 have a element & toggle-button-box with following code:

 <ul>
<li><button class="button is-checked" data-filter="*">All</button></li>
<li><button class="button" data-filter=".a1">a1</button></li>
<li><button class="button" data-filter=".b1">b1</button></li>
<li><button class="button" data-filter=".c1">c1</button></li>
<li><button class="button" data-filter=".d1">d1</button></li>
</ul>

SELECT CODE:

<select class="form-control filters-select" style="border-radius:0">
<option value="*">All</option> 
<option value=".a2">a2</option>
<option value=".b2">b2</option>
<option value=".c2">c2</option>
</select>

Both of the above 2 elements in page-2, using jQuery isotope to filter data. Now, if i have to use a href in page-1, to link to page-2, so that on click it opens page-2, with selected option or checked button.

How to do it ?

What will be the code inside:

<a href""> 

Thanks Tons

Answer 1

You can not do that using just a href link. You can however put a link like:

Using javascript

<a href="page2.php#selectAll"> 

and catch the query with javascript in the onload function:

var whatToDo = window.location.hash.substr(1);
//depending of whatToDo is, select something.

---

Using PHP

<a href="page2.php?select=All">

and catch the GET variable in your php to select something.

<select class="form-control filters-select" style="border-radius:0">
<option value="*" <?php if ($_GET['select']=="All") echo "selected" ?>>All</option> 
<option value=".a2">a2</option>
<option value=".b2">b2</option>
<option value=".c2">c2</option>
</select>

Answer 2

This is a untested but should get you started. Using URL parameters you can send data to page 2 from page 1 this can also be done in PHP.

Page 1:

<a href="page2.html?button=a1&select=a1">Page 2</a>

Page 2:

$( document ).ready(function() {
    var vars = {};
    window.location.href.replace( 
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function( m, key, value ) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );

    $('[data-filter="'+ vars['button'] +'"]').addClass('is-checked');
    $('select > [value="'+ vars['select'] +'"]').attr('selected');
});

Answer 3

Thank you all. I solved it Finally. It was done by using - jQuery isotope hash history / URL hash.