Question

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

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

我想做的事情如下：选择名字： John Doe（第一选择）选择proffesion：牙医（第二选择）选择性别：男（第三选择）

有可能吗？

感谢您的回复。

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

Answer 1

我创建了一个jsfiddle here，它实现了一个基本的例子。

您可以创建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
       }
    });
}

EDIT2：如果您希望第三个选择包含操作，则可以使用相同的原则。我用动作替换了颜色数组。第三个选择将根据前两个选择值而改变。

Updated jsfiddle，它不使用jquery。

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

Answer 2

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

第一个值=国家
第二个值=城市
第三个值=选项

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

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

javascript动态下拉列表 - 两种形式取决于一种

2 个答案: