CODEWITHSUNDEEP
javascriptjqueryhtmlselectparameters
ZUH.
ZUH.

Reputation: 195

Displaying two seperate select box values in a URL

Here are both select boxes, what I need is if there are values selected from both boxes, both should be displayed in the URL, something like this e.g www.example.com#135+#140 OR www.example.com#135&140 (It doesn't matter in which sequence as long as both gets displayed that's the main aim of this)

 <select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">HTML</option>
        <option class="level-0" value="136">PHP</option>
        <option class="level-0" value="137">CSS</option>
    </select>

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>

Below is this script I'm running to display the #search_regions value in the URL, so far it works perfect. Now to be able to add the #search_categories value to that.

<script type="text/javascript">
$(function(){
    $('#search_region').change(function () {
        var url = $(this).val();
        window.location.hash = url;
        console.log('select Changed');
    });
});
window.addEventListener('hashchange', fn, false);

window.onload = fn; // fire on pageload

function fn() {
    $('#search_region').val(window.location.hash.replace('#', ''));
    console.log("hash = " + window.location.hash);
}
 </script>

Any ideas on how to do this? it would be much appreciated

It's an add on from my previously asked question, find link below

Getting the select value to display in a new browser

Upvotes: 2

Views: 76

Answers (1)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

1.You need to apply change event of both select-box.

2.You need to add second select-box value to the window.location.hashalso.

Working snippet:-

$(function(){
   var url = '';
    $('#search_region').change(function () {
        url = $(this).val();
        window.location.hash = url;
         console.log(window.location.hash);
    });
    $('#search_categories').change(function () {
       if(url !==''){
         window.location.hash = url+"&"+$(this).val();
       }
        console.log(window.location.hash);
    });
});

window.addEventListener('hashchange', fn, false);

window.onload = fn; // fire on pageload

function fn() {
    console.log("hash = " + window.location.hash);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">HTML</option>
        <option class="level-0" value="136">PHP</option>
        <option class="level-0" value="137">CSS</option>
    </select>

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>

Upvotes: 2

Related Questions