자바스크립트 문의 입니다 ^^:
본문
다중 셀렉트 인데요.. 한페이지에 2개를 넣을려고하는데..
변경해야할 코드가. 어떤것들이 있나요??
이것저것 수정해도 먹통이 되버리네요 ㅠㅠ
<select id="sel_one" onchange="com_child();" name="wr_4" style="display: inline-block;width:40%" required></select>
<select id="sel_two" name="wr_5" style="display: inline-block;width:40%" required></select>
<script>
let parents =[
{v:"",m:"일자선택"},
{v:"9월 8일",m:"9월 8일"}, //m :셀렉트박스 노출값, v: 저정될값
{v:"9월 11일",m:"9월 11일"},
];
//m :셀렉트박스 노출값, v: 저정될값
let child1 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
let child2 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
function com_parent(){
let opt = [];
parents.forEach(data =>{
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
document.getElementById("sel_one").innerHTML = opt.join("");
}
function com_child(){
let opt = [];
let oneSel = document.getElementById("sel_one").value;
console.log(oneSel);
if( oneSel == ""){
}else {
if( oneSel == "9월 8일"){
child1.forEach(data =>{
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
}else if( oneSel == "9월 11일"){
child2.forEach(data =>{
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
}
}
document.getElementById("sel_two").innerHTML = opt.join("");
}
com_parent();
</script>
답변 2
<select id="sel_one" onchange="com_child();" name="wr_4" style="display: inline-block;width:40%" required></select>
<select id="sel_two" name="wr_5" style="display: inline-block;width:40%" required></select>
<script>
let parents = [
{v:"", m:"일자선택"},
{v:"9월 8일", m:"9월 8일"},
{v:"9월 11일", m:"9월 11일"},
];
let child1 = [
{v:"08:45 퀸메리2", m:"08:45 퀸메리2"},
{v:"16:45 퀸메리2", m:"16:45 퀸메리2"},
];
let child2 = [
{v:"08:45 퀸메리2", m:"08:45 퀸메리2"},
{v:"16:45 퀸메리2", m:"16:45 퀸메리2"},
];
function com_parent() {
let opt = [];
parents.forEach(data => {
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
document.getElementById("sel_one").innerHTML = opt.join("");
}
function com_child() {
let opt = [];
let oneSel = document.getElementById("sel_one").value;
console.log(oneSel);
if (oneSel == "") {
} else {
if (oneSel == "9월 8일") {
child1.forEach(data => {
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
} else if (oneSel == "9월 11일") {
child2.forEach(data => {
opt.push(`<option value="${data.v}">${data.m}</option>`);
});
}
}
document.getElementById("sel_two").innerHTML = opt.join("");
}
com_parent();
</script>
각 셀렉트 박스의 onchange 이벤트를 다른 함수로 처리해주셔야 합니다.
예를 들어, 첫 번째 셀렉트 박스는 com_child1() 함수를,
두 번째 셀렉트 박스는 com_child2() 함수를 호출하도록 하면 됩니다.