Разобрать значения фильтров из url и расставить их по соответствующим полям
Здравствуйте, из нужно из url разобрать значения фильтров и расставить их по соответствующим полям. С checkbox и radio разобрался. а вот с select-ом не могу чет понять. мжет подскажет кто?
<form>
<p><input name="size" type="radio" value="S"> S</p>
<p><input name="size" type="radio" value="M"> M</p>
<p><input name="size" type="radio" value="L"> L</p>
<p><input type="checkbox" name="color" value="1">1</p>
<p><input type="checkbox" name="color" value="2">2</p>
<p><input type="checkbox" name="color" value="3">3</p>
<p><input type="checkbox" name="color" value="4">4</p>
<p><select multiple="multiple" size=4 name="manufacturer">
<option value="aaa">aaa</option>
<option value="b&c">b&c</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
</select></p>
<p><input type="checkbox" name="sale" value="1">Распродажа</p>
</form>
const checkboxes = document.querySelectorAll('[name="color"]'),
radios = document.querySelectorAll('[name="size"]');
let url = new URL('http://любой_домен/filter?size=M&color=2,3&manufacturer=aaa,eee'),
searchParams = new URLSearchParams(url.search),
size = searchParams.get('size'),
colors = searchParams.get('color').split(','),
manufacturers = searchParams.get('manufacturer').split(',');
let len1 = checkboxes.length,
len2 = colors.length,
len3 = radios.length;
for (var i = 0; i < len1, i < len3; i++) {
if (radios[i].value == size) radios[i].checked = true;
for (let j = 0; j < len2; j++) {
if (checkboxes[i].value == colors[j]) checkboxes[i].checked = true;
}
}
|
<form>
<p><input name="size" type="radio" value="S"> S</p>
<p><input name="size" type="radio" value="M"> M</p>
<p><input name="size" type="radio" value="L"> L</p>
<p><input type="checkbox" name="color[]" value="1">1</p>
<p><input type="checkbox" name="color[]" value="2">2</p>
<p><input type="checkbox" name="color[]" value="3">3</p>
<p><input type="checkbox" name="color[]" value="4">4</p>
<p><select multiple="multiple" size=4 name="manufacturer">
<option value="aaa">aaa</option>
<option value="b&c">b&c</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
</select></p>
<p><input type="checkbox" name="sale" value="1">Распродажа</p>
</form>
<script>
const checkboxes = document.querySelectorAll('[name="color[]"]'),
radios = document.querySelectorAll('[name="size"]'),
options = document.querySelectorAll('[name="manufacturer"] option');
let url = new URL('http://любой_домен/filter?size=M&color=2,3&manufacturer=aaa,eee'),
searchParams = new URLSearchParams(url.search),
size = searchParams.get('size'),
colors = searchParams.get('color').split(','),
manufacturers = searchParams.get('manufacturer').split(',');
let len1 = checkboxes.length,
len2 = colors.length,
len3 = radios.length,
len4 = manufacturers.length,
len5 = options.length;
for (var i = 0; i < len1, i < len3; i++) {
if (radios[i].value == size) radios[i].checked = true;
for (let j = 0; j < len2; j++) {
if (checkboxes[i].value == colors[j]) checkboxes[i].checked = true;
};
};
for (var i = 0; i < len5; i++) {
for (let j = 0; j < len4; j++) {
if (options[i].value == manufacturers[j]) options[i].selected = true;
}
};
</script>
|
Dilettante_Pro,
можно чуть проще чем цикл в цикле
<form>
<p><input name="size" type="radio" value="S"> S</p>
<p><input name="size" type="radio" value="M"> M</p>
<p><input name="size" type="radio" value="L"> L</p>
<p><input type="checkbox" name="color[]" value="1">1</p>
<p><input type="checkbox" name="color[]" value="2">2</p>
<p><input type="checkbox" name="color[]" value="3">3</p>
<p><input type="checkbox" name="color[]" value="4">4</p>
<p><select multiple="multiple" size=4 name="manufacturer">
<option value="aaa">aaa</option>
<option value="b&c">b&c</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
</select></p>
<p><input type="checkbox" name="sale" value="1">Распродажа</p>
</form>
<script>
const checkboxes = document.querySelectorAll('[name="color[]"]'),
radios = document.querySelectorAll('[name="size"]'),
options = document.querySelectorAll('[name="manufacturer"] option');
let url = new URL('http://любой_домен/filter?size=M&color=2,3&manufacturer=aaa,eee'),
searchParams = new URLSearchParams(url.search),
size = searchParams.get('size'),
colors = searchParams.get('color').split(','),
manufacturers = searchParams.get('manufacturer').split(',');
let len1 = checkboxes.length,
len2 = colors.length,
len3 = radios.length,
len4 = manufacturers.length,
len5 = options.length;
for (var i = 0; i < len1, i < len3; i++) {
if (radios[i].value == size) radios[i].checked = true;
for (let j = 0; j < len2; j++) {
if (checkboxes[i].value == colors[j]) checkboxes[i].checked = true;
};
};
options.forEach(el=>{
if(manufacturers.includes(el.value)) el.selected = true;
});
</script>
|
j0hnik,
Можно, конечно. Просто я написал в стиле ТС |
| Часовой пояс GMT +3, время: 05:53. |