세 번째 드롭 다운에 데이터를 채우는 방법에 문제가 있습니다.
세 개의 드롭 다운이 있습니다. 첫째로 첫 번째 드롭 다운을 클릭하면 두 번째 드롭 다운이 첫 번째 드롭 다운의 값을 기반으로 목록을 채우고 코드 아래에서 제대로 작동합니다.
문제는 두 번째 드롭 다운을 클릭 할 때 세 번째 드롭 다운에 목록을 채우고 싶지만 아무것도 표시되지 않는다는 것입니다.
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>
완전히 사용자 정의 가능한 방법 사용 :
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다