Мне бы хотелось, чтобы два поля выбора запомнили то, что было выбрано при перезагрузке страницы и установке параметра. Я нашел решения для загрузки 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;
}
}
}