0

I would like the two select fields to remember what has been selected when the page reloads and sets the parameter. I have found solutions for loading a data-url, but not when it is javascript:setParam.

The core of the code was taken from this question How to add a parameter to the URL? but modified slightly.

Here are the select fields:

<select onchange="location = this.value;">
<option value="">Choose a Magic Power</option>
<option value="javascript:setParam('tex_magic_powers', 'high')">Magic Powers: High</option>
<option value="javascript:setParam('tex_magic_powers', 'low');">Magic Powers: Low</option>
</select>

<select onchange="location = this.value;">
<option value="">Choose a Strength</option>
<option value="javascript:setParam('tex_strength', 'average')">Average</option>
<option value="javascript:setParam('tex_strength', 'mighty');">Mighty</option>
</select>

and the script:

function setParam(name, value) {
    var l = window.location;

    /* build params */
    var params = {};
    var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;
    var s = l.search;
    for (var r = x.exec(s); r; r = x.exec(s)) {
      r[1] = decodeURIComponent(r[1]);
      if (!r[2]) r[2] = '%%';
      params[r[1]] = r[2];
    }

    /** Check to see if the param exist already
    Delete if it exist, set it, if it doesn't
    **/
    if (params[name] && value == params[name]) {
      delete params[name];
    } else if (params[name] && value != params[name]) {
      delete params[name];
      params[name] = encodeURIComponent(value);
    } else {
      params[name] = encodeURIComponent(value);
    }

    /* set param */

    /* build search */
    var search = [];
    for (var i in params) {
      var p = encodeURIComponent(i);
      var v = params[i];
      if (v != '%%') p += '=' + v;
      search.push(p);
    }
    search = search.join('&');

        /* execute search */``
    l.search = search;
  }

I thought I was getting somewhere with code found on http://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load--cms-32210 but I do not know what to modify in the script to be javascript:setParam instead of data-url:

HTML:

<select class="myselect">
  <option data-url="index.html">All</option>
  <option data-url="animals.html">Animals</option>
  <option data-url="cars.html">Cars</option>
  <option data-url="motorcycles.html">Motorcycles</option>
  <option data-url="plants.html">Plants</option>
</select>

Script:

 const select = document.querySelector(".myselect");
    const options = document.querySelectorAll(".myselect option");

    // 1
    select.addEventListener("change", function() {
      const url = this.options[this.selectedIndex].dataset.url;
      if(url) {
        localStorage.setItem("url", url);
        location.href = url;
      }
    });

    // 2
    if(localStorage.getItem("url")) {
      for(const option of options) {
        const url = option.dataset.url;
        if(url === localStorage.getItem("url")) {
          option.setAttribute("selected", "");
          break;
        }
      }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.