Change the dropdown menu text to show the selected option text once the page has been redirected

Question

Change the dropdown menu text to show the selected option text once the page has been redirected

Hey there, I am looking to dynamically update the dropdown text with the selected option after a page redirect and reload of the dropdown. Check out my code below:

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

Currently, every time I select an option from the dropdown, the page loads but only shows the "Recommended Items" option instead of the one I selected. For example, if I choose "Name (Z-A)", I expect the dropdown text to update accordingly after the page loads.

I've attempted this code to achieve the desired result, though it hasn't worked as expected:

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

javascript jquery html css

Answer 1

Answer №1

To incorporate the selected attribute into options within the <select> tag, simply include a name attribute in the select element. Upon form submission, retrieve the value and implement a condition to automatically select the item after the page has loaded.

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

For example:

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

Repeat this setup for all available options.

Answer 2

To incorporate the selected attribute into options within the <select> tag, simply include a name attribute in the select element. Upon form submission, retrieve the value and implement a condition to automatically select the item after the page has loaded.

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

For example:

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

Repeat this setup for all available options.

Answer 3

Answer №2

Here are the steps you can follow.

Include the selected value in the URL.
Upon page load, retrieve the values from the URL to automatically select the value.

$(document).ready(function() {
  $("#social").change(function(event) {
    var target_url = $(this).val();
    //include the target URL in the URL scope
    var redirect_url = target_url + "?social=" + target_url;
    location.href = redirect_url;
  });

  //on page load retrieve the URL values to auto-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

Here are the steps you can follow.

Include the selected value in the URL.
Upon page load, retrieve the values from the URL to automatically select the value.

$(document).ready(function() {
  $("#social").change(function(event) {
    var target_url = $(this).val();
    //include the target URL in the URL scope
    var redirect_url = target_url + "?social=" + target_url;
    location.href = redirect_url;
  });

  //on page load retrieve the URL values to auto-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 5

Answer №3

Looking to dynamically update a select box based on the url parameter "sort1desc"? Check out this snippet of jquery code below.

$(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];
        }
    }
}

Answer 6

Looking to dynamically update a select box based on the url parameter "sort1desc"? Check out this snippet of jquery code below.

$(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];
        }
    }
}

Answer 7

Answer №4

To save the selected value, you can utilize localStorage.getItem() and localStorage.setItem();. Afterwards, in your ready-function, you can reselect the saved value.

For more information on localStorage, visit: 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
    });
});

Here's a working example without using 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 8

To save the selected value, you can utilize localStorage.getItem() and localStorage.setItem();. Afterwards, in your ready-function, you can reselect the saved value.

For more information on localStorage, visit: 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
    });
});

Here's a working example without using 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>

Change the dropdown menu text to show the selected option text once the page has been redirected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

Complete the modal window form

I am struggling to retrieve a value from the angular.forEach function, the flag value is not being obtained. What could be

Utilize javascript to activate the hyperlink

Observing the timepiece malfunctioning beyond expectations

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Numerous buttons activating a single modal component

Using JSON Object for Default Selection in an Angular Dropdown Menu

Activate the click function of an asp.net linkbutton when the mouse enters by utilizing jQuery

Unable to successfully cancel requestAnimationRequest in a React component when using hooks

Responses Loop Continuously Changing

Retrieving text content from multiple classes with a single click event

When working with Vue 3, remember that inject() function is only allowed within setup or functional components

Setting up lint-staged for Vue projects: A step-by-step guide

Switch up the appearance of a document by manipulating the stylesheet using a select tag

Why is it necessary to create a new object in Node.js to establish a server?

Internet Explorer causing issues with Jasmine mocking ajax calls

Operating two independent Angular applications simultaneously on a single webpage

Extracting information from a webpage by using Javascript to locate and interact

The BG column image is not stretching to full height