javascript - 实现选择集动态选项问题

Question

我有两个依赖的下拉菜单(Materialize select)国家和州。在选择国家/地区时，我使用 javascript 获得受尊重的州，并且我正在向州选择添加选项，但它在州下拉列表中显示为空...但是当我发出警报，值正确。谁能帮我解决这个问题？

编辑: 删除显示后使用检查:无选择我得到如下所示..实际的 html 选择下拉列表已正确填充，但具体化选择未显示或填充为什么？ See image here
HTML 代码:

 <select name="country" id="country" onchange="setStates();" style="width:100px; font-weight:bold;" >
     <option value="">Select</option>
      /* Country  options here */
    </select>
 <select name="state" id="state" style="width:100px; font-weight:bold;" >
    </select>

Javascript代码:

function setStates() {

  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];

  changeSelect('state', stateList, stateList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }

}

Answer 1

您必须重新初始化具体化选择，尝试以下操作:

function setStates() {

  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];

  changeSelect('state', stateList, stateList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;

  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
  // Materialize old version
  $('#'+fieldID).material_select();
  // Materialize new version
  $('#'+fieldID).select();

}