javascript - 从选择填充下拉列表到另一个下拉值不显示

Question

我在如何将数据填充到第三个下拉列表时遇到了麻烦。
我有三个下拉列表，首先当我单击第一个下拉列表时，第二个下拉列表将根据我的第一个下拉列表的值填充列表，并且在我的代码下方它可以正常工作。
问题是，当我单击第二个下拉列表时，我想将列表填充到我的第三个下拉列表中，但它没有显示任何内容。

var mealsByCategory = 
    { A: [ 'San Francisco', 'Manila', 'Kirishima' ] 
    , B: [ 'b', 'bb', 'bbb', 'bbbb' ] 
    , C: [ 'c', 'ccc', 'cccc', 'ccccc', 'cccccc' ] 
    } 
var Mprovinces = 
    { A: [ 'San Francisco', 'Manila', 'Kirishima' ] 
    , B: [ 'b', 'bb', 'bbb', 'bbbb' ] 
    , C: [ 'c', 'ccc', 'cccc', 'ccccc', 'cccccc' ] 
    } 
    
function changemeal(value) {
  $('#category').prop('disabled', false);
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (categoryId in mealsByCategory[value]) {
      catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

function changecat(value) {
  $('#provinces').prop('disabled', false);
  if (value.length == 0) document.getElementById("provinces").innerHTML = "<option></option>";
  else {
    var catOptions1 = "";
    for (categoryId in Mprovinces[value]) {
      catOptions1 += "<option>" + Mprovinces[value][categoryId] + "</option>";
    }
    document.getElementById("provinces").innerHTML = catOptions1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onChange="changemeal(this.value);">
  <option value="" disabled selected>Select Province</option>
  <option value="A">Usa</option>
  <option value="B">Japan</option>
  <option value="C">China</option>
</select>

<select name="category" id="category" onChange="changecat(this.value);" disabled>
  <option disabled selected>Select</option>
  <option value="A">Usa</option>
  <option value="B">Japan</option>
  <option value="C">China</option>
</select>

<select name="provinces" id="provinces" disabled>
  <option value="" disabled selected>Select</option>
</select>

标签： javascripthtml

Answer 1

我的方式...

const f_Geo = document.getElementById('geographia-form')
 , selOrder = [ 'region', 'land', 'city' ] // hierarchical order of selects
 , treeData =
    [ { id:  1, name: 'USA',           parentID:  0 }
    , { id:  2, name: 'Japan',         parentID:  0 }
    , { id:  3, name: 'Europe',        parentID:  0 }
    , { id:  4, name: 'California',    parentID:  1 }
    , { id:  5, name: 'Oklahoma',      parentID:  1 }
    , { id:  6, name: 'Arizona',       parentID:  1 }
    , { id:  7, name: 'Kantô',         parentID:  2 }
    , { id:  8, name: 'Kansai',        parentID:  2 }
    , { id:  9, name: 'Chügoku',       parentID:  2 }
    , { id: 10, name: 'France',        parentID:  3 }
    , { id: 11, name: 'Deutschland',   parentID:  3 }
    , { id: 12, name: 'Espana',        parentID:  3 }
    , { id: 13, name: 'Sacramento',    parentID:  4 }
    , { id: 14, name: 'Los Angeles',   parentID:  4 }
    , { id: 15, name: 'San Diego',     parentID:  4 }
    , { id: 16, name: 'Tulsa',         parentID:  5 }
    , { id: 17, name: 'Oklahoma City', parentID:  5 }
    , { id: 18, name: 'Lawton',        parentID:  5 }
    , { id: 19, name: 'Phoenix',       parentID:  6 }
    , { id: 20, name: 'Flagstaff',     parentID:  6 }
    , { id: 21, name: 'Tucson',        parentID:  6 }
    , { id: 21, name: 'Tokyo',         parentID:  7 }
    , { id: 22, name: 'Chiba',         parentID:  7 }
    , { id: 23, name: 'Tochigi',       parentID:  7 }
    , { id: 24, name: 'Kyoto',         parentID:  8 }
    , { id: 25, name: 'Osaka',         parentID:  8 }
    , { id: 26, name: 'Nara',          parentID:  8 }
    , { id: 27, name: 'Tottori',       parentID:  9 }
    , { id: 28, name: 'Hirochima',     parentID:  9 }
    , { id: 29, name: 'Okayama',       parentID:  9 }
    , { id: 30, name: 'Quimper',       parentID: 10 }
    , { id: 31, name: 'Toulouse',      parentID: 10 }
    , { id: 32, name: 'Nancy',         parentID: 10 }
    , { id: 33, name: 'Dusseldorf',    parentID: 11 }
    , { id: 34, name: 'Leipzig',       parentID: 11 }
    , { id: 35, name: 'Munchen',       parentID: 11 }
    , { id: 36, name: 'Barcelona',     parentID: 12 }
    , { id: 37, name: 'Sevilla',       parentID: 12 }
    , { id: 38, name: 'Guernica',      parentID: 12 }
    ]
  ;
f_Geo.onsubmit=e=>e.preventDefault()  // disable submit
  ;
f_Geo.onchange=e=>
  {
  //if (!e.target.matches('select')) return  
  setSubSelects(e.target.name)
  }
function setSelect(name,id)
  {
  f_Geo[name].innerHTML = '' // clear select
  treeData.filter(el=>el.parentID===id)
          .forEach(el=>{ f_Geo[name].add( new Option(el.name, el.id)) })
  }
function setSubSelects(selectName)
  {
  let idx = selOrder.findIndex(x=>x===selectName) +1
  if (idx < selOrder.length)
    {
    let sName = selOrder[idx]
    setSelect ( sName,  +f_Geo[selectName].value )
    setSubSelects(sName)
    }
  }

setSelect('region',0)
setSubSelects('region')

<form action="" id="geographia-form">
  <select name="region"></select>
  <select name="land"></select>
  <select name="city"></select>
</form>