Javascript （修改JSFIDLE）如何根据在上一个下拉框中选择的内容使下拉框仅可见？

这就是我正在使用的基础：

但是，相反，我试图使其在您选择一个国家之前，国家下拉列表下方的下拉列表不会出现。另外，我想添加一个第三个国家选项，如果您选择它，下一个下拉框将保持隐藏

有什么帮助吗

HTML:

--选择国家--




--选择状态--




--选择城市--




--选择Zip--

JavaScript:

var countryStateInfo = {
  "USA": {
    "California": {
      "Los Angeles": ["90001", "90002", "90003", "90004"],
      "San Diego": ["92093", "92101"]
    },
    "Texas": {
      "Dallas": ["75201", "75202"],
      "Austin": ["73301", "73344"]
    }
  },
  "India": {
    "Assam": {
      "Dispur": ["781005"],
      "Guwahati": ["781030", "781030"]
    },
    "Gujarat": {
      "Vadodara": ["390011", "390020"],
      "Surat": ["395006", "395002"]
    }
  }
}

window.onload = function() {
  //Get html elements
  var countySel = document.getElementById("countySel");
  var stateSel = document.getElementById("stateSel");
  var citySel = document.getElementById("citySel");
  var zipSel = document.getElementById("zipSel");

  //Load countries
  for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
  }

  //County Changed
  countySel.onchange = function() {
    stateSel.length = 1; // remove all options bar first
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var state in countryStateInfo[this.value]) {
      stateSel.options[stateSel.options.length] = new Option(state, state);
    }
  }

  //State Changed
  stateSel.onchange = function() {
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var city in countryStateInfo[countySel.value][this.value]) {
      citySel.options[citySel.options.length] = new Option(city, city);
    }
  }

  //City Changed
  citySel.onchange = function() {
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
    for (var i = 0; i < zips.length; i++) {
      zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
    }
  }
}

var countryStateInfo={
“美国”：{
“加利福尼亚”：{
“洛杉矶”：[“90001”、“90002”、“90003”、“90004”]，
“圣地亚哥”：[“92093”、“92101”]
},
“德克萨斯州”：{
“达拉斯”：[“75201”、“75202”]，
“奥斯汀”：[“73301”、“73344”]
}
},
“印度”：{
“阿萨姆”：{
“Dispur”：[“781005”]，
“Guwahati”：[“781030”、“781030”]
},
“古吉拉特邦”：{
“瓦多达拉”：[“390011”、“390020”]，
“苏拉特”：[“395006”、“395002”]
}
}
}
window.onload=函数（）{
//获取html元素
var countySel=document.getElementById（“countySel”）；
var stateSel=document.getElementById（“stateSel”）；
var citySel=document.getElementById（“citySel”）；
var zipSel=document.getElementById（“zipSel”）；
//装货国
for（countryStateInfo中的var国家/地区）{
countySel.options[countySel.options.length]=新选项（国家，国家）；
}
//县变
countySel.onchange=函数（）{
stateSel.length=1；//首先删除所有选项栏
citySel.length=1；//首先删除所有选项栏
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
return；//完成
for（countryStateInfo[this.value]中的var状态）{
stateSel.options[stateSel.options.length]=新选项（state，state）；
}
}
//状态改变
stateSel.onchange=函数（）{
citySel.length=1；//首先删除所有选项栏
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
return；//完成
对于（countryStateInfo[countySel.value][this.value]中的var city）{
citySel.options[citySel.options.length]=新选项（城市，城市）；
}
}
//城市变了
citySel.onchange=函数（）{
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
return；//完成
var zips=countryStateInfo[countySel.value][stateSel.value][this.value]；
对于（var i=0；i

我很快就为你写了这篇文章。您可以对其进行升级，使其更加优化

您可以找到一些添加到代码中的切换函数以及调用它们的代码行

var countryStateInfo={
“美国”：{
“加利福尼亚”：{
“洛杉矶”：[“90001”、“90002”、“90003”、“90004”]，
“圣地亚哥”：[“92093”、“92101”]
},
“德克萨斯州”：{
“达拉斯”：[“75201”、“75202”]，
“奥斯汀”：[“73301”、“73344”]
}
},
“印度”：{
“阿萨姆”：{
“Dispur”：[“781005”]，
“Guwahati”：[“781030”、“781030”]
},
“古吉拉特邦”：{
“瓦多达拉”：[“390011”、“390020”]，
“苏拉特”：[“395006”、“395002”]
}
}
}
window.onload=函数（）{
//获取html元素
var countySel=document.getElementById（“countySel”）；
var stateSel=document.getElementById（“stateSel”）；
var citySel=document.getElementById（“citySel”）；
var zipSel=document.getElementById（“zipSel”）；
//装货国
for（countryStateInfo中的var国家/地区）{
countySel.options[countySel.options.length]=新选项（国家，国家）；
}
//县变
countySel.onchange=函数（）{
stateSel.length=1；//首先删除所有选项栏
citySel.length=1；//首先删除所有选项栏
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）{
切换状态（假）；
return；//完成
}
切换状态（真）；
for（countryStateInfo[this.value]中的var状态）{
stateSel.options[stateSel.options.length]=新选项（state，state）；
}
}
//状态改变
stateSel.onchange=函数（）{
citySel.length=1；//首先删除所有选项栏
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）{
切换性（假）；
return；//完成
}
切换性（真）；
对于（countryStateInfo[countySel.value][this.value]中的var city）{
citySel.options[citySel.options.length]=新选项（城市，城市）；
}
}
//城市变了
citySel.onchange=函数（）{
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）{
toggleZip（假）；
return；//完成
}
toggleZip（真）；
var zips=countryStateInfo[countySel.value][stateSel.value][this.value]；
对于（var i=0；i

--选择国家--




--选择状态--




--选择城市--




--选择Zip--

var countryStateInfo = {
  "USA": {
    "California": {
      "Los Angeles": ["90001", "90002", "90003", "90004"],
      "San Diego": ["92093", "92101"]
    },
    "Texas": {
      "Dallas": ["75201", "75202"],
      "Austin": ["73301", "73344"]
    }
  },
  "India": {
    "Assam": {
      "Dispur": ["781005"],
      "Guwahati": ["781030", "781030"]
    },
    "Gujarat": {
      "Vadodara": ["390011", "390020"],
      "Surat": ["395006", "395002"]
    }
  }
}

window.onload = function() {
  //Get html elements
  var countySel = document.getElementById("countySel");
  var stateSel = document.getElementById("stateSel");
  var citySel = document.getElementById("citySel");
  var zipSel = document.getElementById("zipSel");

  //Load countries
  for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
  }

  //County Changed
  countySel.onchange = function() {
    stateSel.length = 1; // remove all options bar first
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var state in countryStateInfo[this.value]) {
      stateSel.options[stateSel.options.length] = new Option(state, state);
    }
  }

  //State Changed
  stateSel.onchange = function() {
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var city in countryStateInfo[countySel.value][this.value]) {
      citySel.options[citySel.options.length] = new Option(city, city);
    }
  }

  //City Changed
  citySel.onchange = function() {
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
    for (var i = 0; i < zips.length; i++) {
      zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
    }
  }
}