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>

Answer 1

使用完全可定制的方式:

let data = [{"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}]

function populateList(list, pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "--Select--";
  l.appendChild(topItem); 
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item){
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  })
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}
function triggerEvent(e, trigger)
{
    if ((e[trigger] || false) && typeof e[trigger] == 'function')
    {
        e[trigger](e);
    }
}
 

function loadList1() {
  populateList("list1", 0);
}

window.onload = loadList1;

select {width:150px;}

Region: <select id="list1" onchange="updateList('list2', this);"></select>
Sub-region:<select id="list2" onchange="updateList('list3', this);"></select>>
Location:<select id="list3"></select>

只要数据结构相同——即 {"id":n, "name":"xxx", "parentid":n}那么唯一的变化是每个列表旁边的文本 - 否则，只需更新该函数即可使用提供的键名。而且，由于我们所做的只是基于相同的数组填充列表，它们都可以使用相同的基函数 - populateList .初始加载和列表中的选择开始不同，但最终做同样的事情 - 基于过滤后的数组填充列表。

function getText() {
  let thisList = document.getElementById("list1");
  console.log(thisList.value);
  console.log(thisList[thisList.selectedIndex].text);

}

<button onclick="getText();">Click</button>

<select id="list1">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>