CODEWITHSUNDEEP
javascripthtml
Fxs7576
Fxs7576

Reputation: 1341

Select a Dropdown, Change the JS Value and Reload the Page

I am trying to write a script that when I select an option from a dropdown box, it does the following:

  1. change the value of the "var pick_" based on this option;
  2. reload the page; and
  3. maintain the selected option in the dropdown and "var pick_".

How can I make this happens using Javascript? I have looked into here and here but the selection option does not get maintained after reloading the page.

Here is my script:

var pick_ = 1

<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

function getSelectValue(selectID){
     pick_ = document.getElementById(selectID).value;
     location.reload(); 
}

Thank you

Upvotes: 0

Views: 7659

Answers (5)

priyadarshi swain
priyadarshi swain

Reputation: 246

You have to save the value of the dropdown to some globally available position like cookies or local storage.

Note: The snippet does not run here but will work just fine. 

function getSelectValue(selectID){
         pick_ = document.getElementById('selectX').value;
         localStorage.setItem("lastSelectedValue", pick_); 
         location.reload(); 
}
function getLastSelectedValue(){
         var value = localStorage.getItem("lastSelectedValue")
         if(value )
         {
            document.getElementById('selectX').value = value  ;
         }
}
<html>
<body onload = 'getLastSelectedValue()'>
<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
     <option>option 5</option>
</select>
</body>
</html>

Upvotes: 1

SynchroDynamic
SynchroDynamic

Reputation: 386

If you require the page to reload then you can set the parameter in your URL. You can then get the parameter. There are many other ways to do this, I doubt there is a reason to store this in any way.

To achieve this, I did the following:

  1. give the options a value.
  2. Create a function to set the parameter in the URL setSelectValue(key, value)
  3. Create a function to get this value when the page is reloaded getParameter(name, url)

  4. Then you just enjoy!

    <select id = "selectX" onchange="setSelectValue('id', this.value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<script>
    var pick_ = getParameter("id");
    var selectedOption = document.getElementById("selectX");
    selectedOption.options[(pick_ - 1)].setAttribute("selected", "selected");
    function setSelectValue(key, value) {//We can set a Parameter in our URL like this
        key = encodeURI(key);
        value = encodeURI(value);
        var kvp = document.location.search.substr(1).split('&');
        var i = kvp.length;
        var x;
        while (i--)//
        {
            x = kvp[i].split('=');
            if (x[0] === key)
            {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }
        if (i < 0) {
            kvp[kvp.length] = [key, value].join('=');
        }
        document.location.search = kvp.join('&');
    }
    function getParameter(name, url) {//We can then return the URL like this
        if (!url)
            url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
        if (!results)
            return 1;//if no parameters return the first option
        if (!results[2])
            return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
</script>

I hope this works per your requirements.

Upvotes: 0

am05mhz
am05mhz

Reputation: 2875

this is actually uses the same technology with sultan khan's answer, but you need to retrieve the value after a reload.

window.addEventListener('load', function(){
    if (localStorage.pick) {
        var sel = document.querySelector('#selectX');
        sel.value = localStorage.pick;
    }
});

function getSelectValue(){
    var sel = document.querySelector('#selectX');
    localStorage.pick = sel.value;
    location.reload();
}

then in your HTML

<select id = "selectX" onchange = "getSelectValue();">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Upvotes: 1

zsubzwary
zsubzwary

Reputation: 1246

The shortest answer will be use cookies.

function getSelectValue(selectID){
    pick_ = document.getElementById(selectID).value;
    document.cookie = "pick="+pick_;
    location.reload(); 
}

and the next time you reload the page check for the cookie name "pick" if it exists, pick it's value otherwise choose default

Upvotes: 0

Sultan Khan
Sultan Khan

Reputation: 318

you can store somewhere by using local-storage or cookie or any server-side if you want to persist the variable data.

var pick_ = 1

<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

function getSelectValue(selectID){
     pick_ = document.getElementById(selectID).value;
     localStorage.pick_ =pick_ 
     pick_ = localStorage.getItem("pick_");
     location.reload(); 
}

Hope this work for you.

Upvotes: 2

Related Questions