#javascript #html #bootstrap-4
#javascript #HTML #bootstrap-4
Вопрос:
У меня есть 2 отдельных выпадающих списка и кнопка отправки, которая перенаправляет посетителя на уникальный URL-адрес на основе выбранных параметров.
Мне нужно, чтобы каждый выпадающий список фильтровал друг друга.
например: когда кто-то выбирает «Volvo» из первого выпадающего меню, то во втором выпадающем меню отображаются только «Красный» и «Белый» и так далее.
HTML
<form>
<select class="homepage-dropdown col-md-6 col-9" id="carbrand">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<select class="homepage-dropdown col-md-6 col-9" id="carcolor">
<option value="white">White</option>
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<br/><br/>
<input id="btnCallURL" type="button" value="بحث">
</form>
Javascript
document.getElementById('btnCallURL').onclick = function() {
var carbrandObj = document.getElementById('carbrand');
var carcolorObj = document.getElementById('carcolor');
var carbrandValue = carbrandObj.options[carbrandObj.selectedIndex].value;
var carColorValue = carcolorObj.options[carcolorObj.selectedIndex].value;
jsCallUrl(carbrandValue, carColorValue);
}
function jsCallUrl(carbrandValue, carColorValue){
var pageUrl = "";
switch (carbrandValue){
case "volvo":
switch (carColorValue){
case "white":
pageUrl = "volvo-white-page-url.php";
break;
case "black":
pageUrl = "volvo-black-page-url.php";
break;
case "red":
pageUrl = "volvo-red-page-url.php";
break;
case "blue":
pageUrl = "volvo-blue-page-url.php";
break;
}
break;
case "saab":
switch (carColorValue){
case "white":
pageUrl = "saab-white-page-url.php";
break;
case "black":
pageUrl = "saab-black-page-url.php";
break;
default:
pageUrl = "saab-othercolor-page-url.php";
break;
}
break;
}
if (pageUrl != ""){
location.href = "https://domain/" pageUrl;
}
}
Комментарии:
1. вас устраивает решение jquery?
2. Пожалуйста, обновите его, если увидите, что его можно написать лучше. потому что я новичок в этом
3. проверьте новое решение
Ответ №1:
Редактировать проблема повторяющихся значений решена. Я внес несколько изменений в ваш HTML
//new
window.addEventListener( "pageshow", function ( event ) {
var historyTraversal = event.persisted || ( typeof window.performance != "undefined" amp;amp; window.performance.navigation.type === 2 );
if ( historyTraversal ) {
window.location.reload();
}
});
<form>
<select onChange="populate('carbrand','carcolor');" class="homepage-dropdown col-md-6 col-9" id="carbrand">
<option selected>select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<select class="homepage-dropdown col-md-6 col-9" id="carcolor">
<option id="select" selected>Select color</option>
</select>
<br/><br/>
<input id="btnCallURL" type="button" value="بحث">
</form>
И я использовал метод заполнения для динамического ввода значений с помощью Javascript.
<script>
function populate(s1,s2){
var s = document.getElementById(s1);
var s_a = document.getElementById(s2);
var select = document.getElementById(s2).options.length;
for (var i = select; i >0;i-- ) {
document.getElementById(s2).options.remove(i);
console.log(i);
}
document.getElementById('select').selected='selected';
var optionArray=[];
if(s.value == "volvo"){
optionArray = ["red|Red","white|White"];
}
else if(s.value == "saab"){
optionArray = ["white|White","gray|Gray"];
}
else if(s.value == "audi"){
optionArray = ["black|Black","red|REd"];
}
else if(s.value == "opel"){
optionArray = ["red|REd","black|Black"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s_a.options.add(newOption);
}
}
document.getElementById('btnCallURL').onclick = function() {
var carbrandObj = document.getElementById('carbrand');
var carcolorObj = document.getElementById('carcolor');
var carbrandValue = carbrandObj.options[carbrandObj.selectedIndex].value;
var carColorValue = carcolorObj.options[carcolorObj.selectedIndex].value;
jsCallUrl(carbrandValue, carColorValue);
}
function jsCallUrl(carbrandValue, carColorValue){
var pageUrl = "";
switch (carbrandValue){
case "volvo":
switch (carColorValue){
case "white":
pageUrl = "volvo-white-page-url.php";
break;
case "black":
pageUrl = "volvo-black-page-url.php";
break;
case "red":
pageUrl = "volvo-red-page-url.php";
break;
case "blue":
pageUrl = "volvo-blue-page-url.php";
break;
}
break;
case "saab":
switch (carColorValue){
case "white":
pageUrl = "saab-white-page-url.php";
break;
case "black":
pageUrl = "saab-black-page-url.php";
break;
default:
pageUrl = "saab-othercolor-page-url.php";
break;
}
break;
}
if (pageUrl != ""){
location.href = "https://domain/" pageUrl;
}
}
</script>
Комментарии:
1. отлично, повторяющаяся проблема была устранена, но кнопка не работает.
2. проверьте сейчас, это было потому, что значение параметра не было полностью в нижнем регистре
3. отлично, теперь все работает нормально. Только последнее замечание, что когда кнопка нажата и посетитель переходит на другую страницу, а затем нажимает кнопку «Назад», форма не работает должным образом. у вас есть исправление для этого?