单击时更改选择的选项

Question

What I am trying to achieve is as follows:

When the user changes the selected value in the select box, it will refresh the page, add the selected text value to the existing URL and reset the select box default to the value selected by the user before page refresh.

Any ideas what I am doing wrong?

HTML code:

<select class="selectedForm">
    <option value="one" selected>one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option value="four">four</option>
</select>

Javascript code:

$(".selectedForm").change(function() {    
   $('.selectedForm option:contains(' + this.value + ')').prop({selected: true});    
   alert( $('.selectedForm').find(":selected").val() );
   if ( window.location.href.indexOf("&") > -1 )  {
       window.location.search = '?toWhere=Cursos&q='+$('.selectedForm').find(":selected").text();
   } else {
       window.location.search += '&q='+$('.selectedForm').find(":selected").text();
   }
});

FIDDLE

Answer 1

From get-url-parameters-values-with-jquery ,

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

$(function(){
   var q= getUrlVars()["q"];
   if(q){
       $('.selectedForm option:contains('+q+')').prop('selected',true);
   }    
});

And if you are using server side script like PHP then, it is more easy to get by using $_GET or $_REQUEST

Also you can change your drop down onchange event like,

$(".selectedForm").change(function () {
    if (window.location.href.indexOf("&") > -1) {
        window.location.search = '?toWhere=Cursos&q=' + $('.selectedForm option:selected').text();
    } else {
        window.location.search += '&q=' + $('.selectedForm option:selected').text();
    }
});

Something like that

Answer 2

To preserve the value of the selector after a reload you could use something like:

$(".selectedForm").on('change', function() {
  var _loc = String(location.href)
      ,loc  = _loc.substr(0, _loc.lastIndexOf('/'));
      self.location.href = loc + '?selected='+this.value;
});

// handler to load the selected option on page load
function loadSelectedOpt() {
    var loc = location.search;
    if (loc.length) {
        $(".selectedForm").val(loc.split('=')[1]);
    }
}

In words: add the selected option value to the querystring of the current location ( ?selected=[selected value] ), reload the page, and use the querystring to set the value of the selector when the page is reloaded.

Here's a jsFiddle demo

Answer 3

This can be done by storing the value in localstorage and on page loads you have to set the value again to the dropdown. This is the only way in front end.

Otherwise you can do this by sending the value to backend and getting back on page loads.

Hope this will solve your problem!!

Answer 4

What you are missing here is after a page refresh, all resources are reloaded. Since the dropdown and your javascript is reloaded, this.value will not have a valid value that you are looking for to set the dropwdown.

You can either use local storage or simply retrieve the previously selected value from your query string. Further, you will need to set it during load event of the page. Here is an example:

$(document).ready( function(){
    var queryStringBegin = window.location.search.indexOf("&q=");

    if ( queryStringBegin > -1 )  {
        var queryStrValue = window.location.search.substr(window.location.search.indexOf('&q=')+3);
        $('.selectedForm option:contains('+queryStrValue+')').prop({selected: true});
    }
});

NOTE: Further checks may be required in case '&q=' is not always the last section of the query string.