Update dropdown menu text with selected option text after page redirect

Question

Hello i would like to update the drop down text with the selected option text after page redirect and drop down reloaded. Here is my code

<div class="sorting-option">
    <select id="selectdropdown" class="dropdown-select">
        <option value="">Recommended Items</option>
        <option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
        <option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
        <option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low- 
High)   
        </option>
        <option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High 
Low) 
        </option>
    </select>
</div>

when i select any option from this drop down it loads the page and open that link which is there in the value section of that option. after every time the page loads i see only recommanded items option text not the one which i selected from the drop down. Like if i select Name (ZA) it should update to the Name (ZA) in the dropdown after page load.

I have tried this code so far but its not giving me the expected result

$(document).ready(function () {
        $('#selectdropdown').change(function () {
            location.href = $(this).val();
            $("#selectdropdown option:selected").text();
        });
    });

Answer 1

You could use localStorage.getItem() and localStorage.setItem(); to save the selected value and then reselect the value in your ready-function.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage

$(document).ready(function() {
    var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
    if (opt) opt.selected = true;

    $('#selectdropdown').change(function() {
        localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);

        location.href = $(this).val(); //instant redirect
        //$( "#selectdropdown option:selected" ).text(); <-- not possible because js is already about to redirecting
    });
});

Working example (without jquery):

<select id="selectdropdown" onchange="changed(this)">
    <option>nothing</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>
<script>
    var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
    if (opt) {
        opt.selected = true;
    }

    function changed(dd) {
        localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
        window.location = location.href;
    }
</script>

Answer 2

You can use selected attribute in options in <select> . Put name attribute in select, and when you are submitting a form, fetch the same after page load, and place a condition so select the item.

<if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif>

Like :

<div class="sorting-option">
    <select id="selectdropdown" class="dropdown-select" name= "selectdropdown">
        <option value="">Recommended Items</option>
        <option value="?sort1desc=F&sort1=Item_NAME" <if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif> >Name (A-Z)</option>
        <option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
    </select>
</div>

Put the same for all the options.

Answer 3

You can follow these steps.

1. Pass the selected value in the url.

2. When the page loads you can check those values from URL to make the value auto selected.

 $(document).ready(function() { $("#social").change(function(event) { var target_url = $(this).val(); //pass the target url in the url scope var redirect_url = target_url + "?social=" + target_url; location.href = redirect_url; }); //on page load get the url values to select it from dropdown. var urlvars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); var keys = urlvars[0].split('='); var default_select = keys[1]; $('#social').val(default_select); }); 

 <form> <select id="social"> <option value="http://localhost/index.cfm">Default</option> <option value="http://localhost/a.cfm">Google</option> <option value="http://localhost/b.cfm">Facebook</option> </select> </form> 

Answer 4

You can check url parameter for sort1desc and assign the value to select box. Here is jquery code.

$(document).ready(function () {
    var sortParam = getUrlParameter("sort1desc");
    alert(sortParam);
    $('#selectdropdown option').each(function() {
        var str = $(this).attr('value');
        if(str.indexOf("sort1desc="+sortParam) >= 0) {
            $('#selectdropdown').val($(this).attr('value'));
        }
    });
    $('#selectdropdown').change(function () {
        location.href = $(this).val();
        $("#selectdropdown option:selected").text();
    });
});
function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}