javascript动态下拉列表-两种形式相互依赖

javascript dynamic drop down list - two forms depend of one

本文关键字：依赖 两种 动态 下拉列表 javascript      更新时间：2023-12-20

我想用javascript创建一个动态下拉列表。现在它是这样工作的：-如果我选择第一个选项，然后选择第二个选项，再选择第三个选项。

我想将此代码更改为：-当我选择第一个选项时，它同时显示第二个和第三个选项（第二和第三选项取决于第一个）

我想做一些类似的事情：选择名称：John Doe（第一选择）选择专业：牙医（第二选择）选择性别：公型（第三种选择）

有可能吗？

谢谢回复。

<!doctype html>
<html>
<head>
<script>
var modelsArray = new Array(
   ["Chevy","","Camaro","Corvette","Impala"],
   ["Dodge","","Avenger","Challenger","Charger"],
   ["Ford","","Mustang","Shelby"]
);
var colorsArray = new Array(
   ["Camaro","","White","Black","Red"],
   ["Corvette","","White","Purple","Blue","Fawn"],
   ["Impala","","White","Black","Red","Chrome Yellow"],
   ["Avenger","","White","Acid Green","Alice Blue"],
   ["Challenger","","White","Violet","Blue-Green"],
   ["Charger","","White","Dark Pastel Red"],
   ["Mustang","","White","Debian red","Impala","Flame"],
   ["Shelby","","White","Deep Spring Bud"]
);
function populate1(s1,s2,s3){
var optionArray = [];
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var s3 = document.getElementById(s3);
s3.innerHTML = "";
   for(var i = 0; i < modelsArray.length; i++){
      if(s1.value == modelsArray[i][0]){
         for(var x = 1; x < modelsArray[i].length; x++){
            optionArray.push(modelsArray[i][x]);
         }
      }
   }
   optionArray.sort();
   for(var option in optionArray){
      var newOption = document.createElement("option");
      newOption.value = optionArray[option];
      newOption.innerHTML = optionArray[option];
      s2.options.add(newOption);
   }
}
function populate2(s1,s2){
var optionArray = [];
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
   for(var i = 0; i < colorsArray.length; i++){
      if(s1.value == colorsArray[i][0]){
         for(var x = 1; x < colorsArray[i].length; x++){
            optionArray.push(colorsArray[i][x]);
         }
      }
   }
   optionArray.sort();
   for(var option in optionArray){
      var newOption = document.createElement("option");
      newOption.value = optionArray[option];
      newOption.innerHTML = optionArray[option];
      s2.options.add(newOption);
   }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate1(this.id,'slct2','slct3')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2" onchange="populate2(this.id,'slct3')"></select>
<hr />
Choose Car Color:
<select id="slct3" name="slct3"></select>
<hr />
</body>
</html>

我在这里创建了一个jsfiddle，它实现了一个基本的示例。

您可以创建DOM事件侦听器来响应select元素的change事件。当触发这些事件时，将所选选项的值传递给一个函数，该函数可以从数据中提取型号/颜色。

理想情况下，你将设置你的服务器端代码，以返回数据的格式，如：

{
    "makes": {
        "ford": {
            "models": {
                "focus": {
                    "colours": [
                        "blue",
                        "black"
                    ]
                },
                "probe": {
                    "colours": [
                        "green",
                        "grey"
                ]
            }
        }
    }
}

使用这种数据格式，您可以轻松地向下钻取对象树，例如

carData.makes.ford.models.focus.colours

一旦你有了数据，你就可以使用jQuery将选项附加到你的选择中，例如

    for (var model in models) {    
        $('select').append('<option value="' 
                                 + model + '">' + model + 
                                 '</option>');
    }

*编辑：如果你想使用前两个选择的组合，那么你可以这样做：

var mapCombinations = {canada: {toronto: {mapName: "canada"}}};
var mapName = mapCombinations[selectValue1][selectValue2].mapName);
showMap(mapName);
function showMap(mapName) {
      // Call server to get map
    $.ajax({
       type: "GET",
       url: "http://yoururl.com/api/map/" + mapName,
       success: function(data){
           // display map
       }
    });
}

编辑2：如果您希望第三个选择包含一个操作，则可以使用相同的原则。我已经用行动代替了颜色阵列。第三个选择将根据前两个选择值而变化。

更新了不使用jquery的jsfiddle。

然后，您可以设置一个事件侦听器来处理该操作。

我需要一直重复第三个值。我试着给你举个例子。

  1. 第一个值=国家
  2. 第二个值=城市
  3. 第三个值=选项

我想做一些事情，比如：如果第一个值=加拿大，则第二个值=多伦多如果第一个值=加拿大，则第三个值=显示加拿大地图

第二个值和第三个值不依赖于它们自己，只依赖于第一个值。

相关文章：