Question

不确定要写什么作为标题，但这是我的问题：

  if(selectedCountry=="India"){
    stateArray=[]
    Object.keys(jsonObj.India).forEach(function(k) {
      stateArray.push(k)
    });
  }

  if(selectedCountry=="USA"){
    stateArray=[]
    Object.keys(jsonObj.USA).forEach(function(k) {
      stateArray.push(k)
    });
  }
  if(selectedCountry=="UK"){
    stateArray=[]
    Object.keys(jsonObj.UK).forEach(function(k) {
      stateArray.push(k)
    });
  }
  if(selectedCountry=="none"){
    stateArray=[]
  }
  for (var i=0; i<stateArray.length; i++){
    var stateOption = new Option(stateArray[i],stateArray[i])
    if (states.length<stateArray.length+1){
      states.appendChild(stateOption);

    }

虽然代码正在运行，但这样做很糟糕。有没有办法重写代码，所以我不需要if语句？因为所选国家/地区是字符串，所以我不能使用：

 Object.keys(jsonObj.selectedCountry).forEach(function(k) {
      stateArray.push(k)
    });

周围有什么办法吗？ THX

Answer 1

两个因素：

减少重复;对于所有可能的事件，stateArray以空数组开头，因此声明一次。如果country is none，它仍然只是一个空数组。

要动态引用键/属性，请使用方括号语法而不是点

stateArray = [];
if(selectedCountry !== "none")
    Object.keys(jsonObj[selectedCountry]).forEach(function(k) {
        stateArray.push(k)
    });

Answer 2

这将是正确的方法。没有理由创建数组然后创建选项。只需在阅读对象的键时创建选项。

＆＃13;

var geographicalData = getGeoData();
var countrySelect = document.getElementById('country');

populateCombo(countrySelect, geographicalData);

countrySelect.addEventListener('change', function(e) {
  var stateSelect = document.getElementById('state');
  stateSelect.options.length = 0;                       // Empty values.
  var selectedCountry = e.target.value;
  
  if (geographicalData[selectedCountry]) {
    populateCombo(stateSelect, geographicalData[selectedCountry]);
  }
});

countrySelect.dispatchEvent(new CustomEvent('change')); // Trigger change.

function populateCombo(combo, obj) {
  var keys = Object.keys(obj).sort();
  for (var i = 0; i < keys.length; i++) {
    var option = new Option(keys[i], keys[i]);
    combo.appendChild(option);
  }
}

function getGeoData() {
  return {
    "India" : {
      "Maharashtra" : 1,
      "Tamil Nadu" : 1,
      "Uttar Pradesh" : 1,
      "West Bengal" : 1,
      "Gujarat" : 1,
      "Karnataka" : 1,
      "Rajasthan" : 1,
      "Andhra Pradesh" : 1,
      "Madhya Pradesh" : 1,
      "Delhi" : 1
    },
    "USA" : {
      "California" : 1,
      "Florida" : 1,
      "New York" : 1,
      "Texas" : 1,
      "Hawaii" : 1,
      "Washington" : 1,
      "Colorado" : 1,
      "Virginia" : 1,
      "North Carolina" : 1,
      "Arizona" : 1
    },
    "UK" : {
      "South West" : 1,
      "East of England" : 1,
      "South East" : 1,
      "East Midlands" : 1,
      "Yorkshire and the Humber" : 1,
      "North West" : 1,
      "West Midlands" : 1,
      "North East" : 1,
      "London" : 1,
      "Scotland" : 1,
      "Wales" : 1,
      "Northern Ireland" : 1
    }
  };
}

＆＃13;

<select id="country"></select>
<select id="state"></select>

＆＃13;

Javascript将字符串转换为对象？

2 个答案: