Фильтрация выпадающего списка на основе другого выпадающего списка Javascript

#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. отлично, теперь все работает нормально. Только последнее замечание, что когда кнопка нажата и посетитель переходит на другую страницу, а затем нажимает кнопку «Назад», форма не работает должным образом. у вас есть исправление для этого?