javascript级联下拉并创建文本输入框

Question

我正在尝试创建一个级联下拉列表，其中还包括值“ Others”。用户选择“其他”后，应弹出一个文本输入框，供用户手动输入信息并提交按钮。

我是JavaScript的新手，所以不确定下面是否正确执行此操作。

var statesUSA = ["California", "Illinois", "Wisconsin", "Others"];
var statesCanada = ["Quebec", "Ontario", "Alberta", "Others"];

function checkvalue(val) {
  if (val === "Others")
    document.getElementById('color').style.display = 'block';
  else
    document.getElementById('color').style.display = 'none';
}

function countryChanged(country) {
  var selectState = document.getElementById('states');
  var ln = selectState.length - 1;
  while (ln > 0) {
    selectState.remove(1); //Remove all but "Select State"
    ln--;
  }

  var stateArray;

  switch (country) {
    case "USA":
      stateArray = statesUSA
      break;
    case "Canada":
      stateArray = statesCanada
      break;
    case "England":
      stateArray = statesEngland
      break;
    default:
  }

  for (i = 0; i < stateArray.length; i++) {
    var option = document.createElement('option');

    option.text = stateArray[i];
    option.value = stateArray[i];

    /*option.text = checkvalue(stateArray[i]);
    option.value = checkvalue(stateArray[i]);*/

    selectState.add(option);
  }
}

<select id='countries' onchange='countryChanged(this.value);'>
  <option value=''>Select Country</option>
  <option value='USA'>USA</option>
  <option value='Canada'>Canada</option>
</select>
<select id='states' onchange='stateChanged(this.value);'>
  <option value=''>Select State</option>
</select>