자바스크립트 질문입니다 ㅜㅜ
본문
첫번째 자바스크립트를 두개 쓰려고하는데...
바꿔바도 작동을 하지 않네요 ㅠㅠ
틀린게 있나요? ㅠㅜ
<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();
<!-- 두번째 -->
<select id="sel_one2" onchange="com_child2();" name="wr_4" style="display: inline-block;width:40%" required></select>
<select id="sel_two2" name="wr_5" style="display: inline-block;width:40%" required></select>
<script>
let parents2 =[
{v:"",m:"일자선택"},
{v:"9월 8일",m:"9월 8일"}, //m :셀렉트박스 노출값, v: 저정될값
{v:"9월 11일",m:"9월 11일"},
];
//m :셀렉트박스 노출값, v: 저정될값
let child3 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
let child4 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
function com_parent2(){
let opt2 = [];
parents2.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
document.getElementById("sel_one2").innerHTML = opt2.join("");
}
function com_child2(){
let opt2 = [];
let oneSel2 = document.getElementById("sel_one2").value;
console.log(oneSel2);
if( oneSel2 == ""){
}else {
if( oneSel2 == "9월 8일"){
child3.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
}else if( oneSel2 == "9월 11일"){
child4.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
}
}
document.getElementById("sel_two2").innerHTML = opt2.join("");
}
com_parent2();
</script>
변경한 내용 색칠~
<!-- 두번째 -->
<select id="sel_one2" onchange="com_child2();" name="wr_4" style="display: inline-block;width:40%" required></select>
<select id="sel_two2" name="wr_5" style="display: inline-block;width:40%" required></select>
<script>
let parents2 =[
{v:"",m:"일자선택"},
{v:"9월 8일",m:"9월 8일"}, //m :셀렉트박스 노출값, v: 저정될값
{v:"9월 11일",m:"9월 11일"},
];
//m :셀렉트박스 노출값, v: 저정될값
let child3 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
let child4 =[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];
function com_parent2(){
let opt2 = [];
parents2.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
document.getElementById("sel_one2").innerHTML = opt2.join("");
}
function com_child2(){
let opt2 = [];
let oneSel2 = document.getElementById("sel_one2").value;
console.log(oneSel2);
if( oneSel2 == ""){
}else {
if( oneSel2 == "9월 8일"){
child3.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
}else if( oneSel2 == "9월 11일"){
child4.forEach(data =>{
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
}
}
document.getElementById("sel_two2").innerHTML = opt2.join("");
}
com_parent2();
답변 3
<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();
<select id="sel_one2" onchange="com_child2();" name="wr_4" style="display: inline-block;width:40%" required></select>
<select id="sel_two2" name="wr_5" style="display: inline-block;width:40%" required></select>
<script>
let parents2 =[
{v:"",m:"일자선택"},
{v:"9월 8일",m:"9월 8일"},
{v:"9월 11일",m:"9월 11일"},
];
let child3 = [
{v:"08:45 퀸메리2", m:"08:45 퀸메리2"},
{v:"16:45 퀸메리2", m:"16:45 퀸메리2"},
];
let child4 = [
{v:"08:45 퀸메리2", m:"08:45 퀸메리2"},
{v:"16:45 퀸메리2", m:"16:45 퀸메리2"},
];
function com_parent2() {
let opt2 = [];
parents2.forEach(data => {
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
document.getElementById("sel_one2").innerHTML = opt2.join("");
}
function com_child2() {
let opt2 = [];
let oneSel2 = document.getElementById("sel_one2").value;
console.log(oneSel2);
if (oneSel2 == "") {
} else {
if (oneSel2 == "9월 8일") {
child3.forEach(data => {
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
} else if (oneSel2 == "9월 11일") {
child4.forEach(data => {
opt2.push(`<option value="${data.v}">${data.m}</option>`);
});
}
}
document.getElementById("sel_two2").innerHTML = opt2.join("");
}
com_parent2();
잘 이해가 안되는데요 구체적으로 어떤 현상인지 스크린샷으로 설명 부탁드립니다.
해결완료 햇어요 ^^:;
감사합니다.
