Javascript 基于另一个下拉列表选择筛选下拉列表

我有两个单独的下拉列表和提交按钮，它根据选择将访问者带到一个唯一的URL

我需要让每个下拉列表互相过滤

例如：当某人从第一个下拉菜单中选择“沃尔沃”时，第二个下拉菜单仅显示“红色”和“白色”，依此类推

HTML

---

编辑重复值的问题已排序。 我对你的HTML做了一些修改

    //new
window.addEventListener( "pageshow", function ( event ) {
          var historyTraversal = event.persisted || ( typeof window.performance != "undefined" && 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>

//新建
window.addEventListener（“页面显示”，函数（事件）{
var historyTraversal=event.persistend | |（typeof window.performance！=“未定义”&&window.performance.navigation.type==2）；
if（历史遍历）{
window.location.reload（）；
}
});
挑选
沃尔沃汽车
萨博
欧宝
奥迪


选择颜色

我使用了填充方法来使用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>

函数填充（s1、s2）{
var s=document.getElementById（s1）；
var s_a=document.getElementById（s2）；
var select=document.getElementById（s2）.options.length；
对于（变量i=select；i>0；i--）{
document.getElementById（s2）.options.remove（i）；
控制台日志（i）；
}
document.getElementById（'select'）。selected='selected'；
var optionArray=[]；
如果（s.value==“沃尔沃”）{
optionArray=[“红|红”、“白|白”]；
} 
否则如果（s.value==“萨博”）{
optionArray=[“白|白”、“灰|灰”]；
}
否则，如果（标准值=“奥迪”）{
optionArray=[“黑|黑”、“红|红”]；
}
否则，如果（s.value==“欧宝”）{
optionArray=[“红|红”、“黑|黑”]；
}
for（optionArray中的var选项）{
var pair=optionArray[option]。拆分（“|”）；
var newOption=document.createElement（“选项”）；
newOption.value=pair[0]；
newOption.innerHTML=pair[1]；
s_a.选项。添加（新选项）；
}
}
document.getElementById（'btnCallURL'）。onclick=function（）{
var carbrandObj=document.getElementById（'carbrand'）；
var carcolornobj=document.getElementById（'carcolor'）；
var carbrandValue=carbrandObj.options[carbrandObj.selectedIndex].value；
var carColorValue=carcolorObj.options[carcolorObj.selectedIndex].value；
jsCallUrl（carbrandValue、carColorValue）；
}
函数jsCallUrl（carbrandValue、carColorValue）{
var pageUrl=“”；
开关（carbrandValue）{
案例“沃尔沃”：
开关（carColorValue）{
“白色”案例：
pageUrl=“沃尔沃白页url.php”；
打破
案例“黑色”：
pageUrl=“沃尔沃黑页url.php”；
打破
案例“红色”：
pageUrl=“沃尔沃红页url.php”；
打破
案例“蓝色”：
pageUrl=“沃尔沃蓝页url.php”；
打破
}
打破
案例“萨博”：
开关（carColorValue）{
“白色”案例：
pageUrl=“saab white page url.php”；
打破
案例“黑色”：
pageUrl=“saab black page url.php”；
打破
违约：
pageUrl=“saab othercolor page url.php”；
打破
}
打破
}
如果（页面URL！=“”）{
location.href=”https://domain/“+pageUrl；
}
}

您对jquery解决方案是否满意。如果您认为它可以写得更好，请更新它。因为我是这方面的新手检查新的解决方案很好，重复的问题已经解决了，但是按钮不起作用。现在检查，这是因为选项的值在小写中不完全很好，现在工作正常。最后要注意的是，当点击按钮，访问者转到另一个页面，然后点击“后退”按钮时，表单工作不正常。你有办法解决这个问题吗？

    //new
window.addEventListener( "pageshow", function ( event ) {
          var historyTraversal = event.persisted || ( typeof window.performance != "undefined" && 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>

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