Как сохранить выбранный параметр при загрузке страницы - PullRequest
0 голосов
/ 08 ноября 2019

Мне бы хотелось, чтобы два поля выбора запомнили то, что было выбрано при перезагрузке страницы и установке параметра. Я нашел решения для загрузки data-url, но не тогда, когда он javascript:setParam.

Ядро кода было взято из этого вопроса Как добавить параметр в URL? но немного изменено.

Вот поля выбора:

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

и сценарий:

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

Я думал, что где-то с кодом, найденным в https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load--cms-32210 но я не знаю, что нужно изменить в сценарии, чтобы оно было javascript:setParam вместо 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>

Сценарий:

 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;
        }
      }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...