테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

자바스크립트 질문입니다 ㅜㅜ 채택완료

다둥이아빠 2년 전 조회 2,300
답변 3
목록

첫번째 자바스크립트를 두개 쓰려고하는데...

바꿔바도 작동을 하지 않네요 ㅠㅠ

틀린게 있나요? ㅠㅜ

 

</p>

<p><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></p>

<p>    <script>

    let parents =[

        {v:"",m:"일자선택"},

        {v:"9월 8일",m:"9월 8일"},  //m :셀렉트박스 노출값, v: 저정될값

        {v:"9월 11일",m:"9월 11일"},     </p>

<p>        ];

    //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"},];

   </p>

<p>    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>`);

                });  </p>

<p>        

            }

        }

        document.getElementById("sel_two").innerHTML = opt.join("");

    }

    com_parent();</p>

<p><!-- 두번째 --></p>

<p><select id="<span style="color:#f1c40f;">sel_one2</span>" onchange="<span style="color:#f1c40f;">com_child2()</span>;"  name="wr_4" style="display: inline-block;width:40%" required></select>

                    

<select id="<span style="color:#f1c40f;">sel_two2</span>"  name="wr_5"  style="display: inline-block;width:40%" required></select></p>

<p>    <script>

    let <span style="color:#f1c40f;">parents2 </span>=[

        {v:"",m:"일자선택"},

        {v:"9월 8일",m:"9월 8일"},  //m :셀렉트박스 노출값, v: 저정될값

        {v:"9월 11일",m:"9월 11일"},     </p>

<p>        ];

    //m :셀렉트박스 노출값, v: 저정될값

    let <span style="color:#f1c40f;">child3 </span>=[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},]; 

    let <span style="color:#f1c40f;">child4 </span>=[{v:"08:45 퀸메리2",m:"08:45 퀸메리2"},{v:"16:45 퀸메리2",m:"16:45 퀸메리2"},];

   </p>

<p>    function <span style="color:#f1c40f;">com_parent2()</span>{

        let <span style="color:#f1c40f;">opt2 </span>= [];

        <span style="color:#f1c40f;">parents2</span>.forEach(data =>{

            <span style="color:#f1c40f;">opt2</span>.push(`<option value="${data.v}">${data.m}</option>`);

        });

        document.getElementById("<span style="color:#f1c40f;">sel_one2</span>").innerHTML = <span style="color:#f1c40f;">opt2</span>.join("");

    }

    

    

    function <span style="color:#f1c40f;">com_child2()</span>{

        let <span style="color:#f1c40f;">opt2</span> = [];

        let <span style="color:#f1c40f;">oneSel2</span> = document.getElementById("<span style="color:#f1c40f;">sel_one2</span>").value;

        

        console.log(<span style="color:#f1c40f;">oneSel2</span>);

        if( <span style="color:#f1c40f;">oneSel2 </span>== ""){

        }else {

            if( <span style="color:#f1c40f;">oneSel2 </span>== "9월 8일"){

                <span style="color:#f1c40f;">child3</span>.forEach(data =>{

                    <span style="color:#f1c40f;">opt2</span>.push(`<option value="${data.v}">${data.m}</option>`);

                });

            }else if( <span style="color:#f1c40f;">oneSel2 </span>== "9월 11일"){

                <span style="color:#f1c40f;">child4</span>.forEach(data =>{

                    <span style="color:#f1c40f;">opt2</span>.push(`<option value="${data.v}">${data.m}</option>`);

                });  </p>

<p>        

            }

        }

        document.getElementById("<span style="color:#f1c40f;">sel_two2</span>").innerHTML = <span style="color:#f1c40f;">opt2</span>.join("");

    }

    <span style="color:#f1c40f;">com_parent2()</span>;

    </script></p>

<p>

 

 

변경한 내용 색칠~

<!-- 두번째 -->

<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개

채택된 답변
+20 포인트
A
Actonsoft
2년 전

</p>

<p><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일"},

];</p>

<p>let child1 = [

    {v:"08:45 퀸메리2", m:"08:45 퀸메리2"},

    {v:"16:45 퀸메리2", m:"16:45 퀸메리2"},

];</p>

<p>let child2 = [

    {v:"08:45 퀸메리2", m:"08:45 퀸메리2"},

    {v:"16:45 퀸메리2", m:"16:45 퀸메리2"},

];</p>

<p>function com_parent() {

    let opt = [];

    parents.forEach(data => {

        opt.push(`<option value="${data.v}">${data.m}</option>`);

    });

    document.getElementById("sel_one").innerHTML = opt.join("");

}</p>

<p>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("");

}</p>

<p>com_parent();

 

</p>

<p><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일"},     

];</p>

<p>let child3 = [

    {v:"08:45 퀸메리2", m:"08:45 퀸메리2"},

    {v:"16:45 퀸메리2", m:"16:45 퀸메리2"},

];</p>

<p>let child4 = [

    {v:"08:45 퀸메리2", m:"08:45 퀸메리2"},

    {v:"16:45 퀸메리2", m:"16:45 퀸메리2"},

];</p>

<p>function com_parent2() {

    let opt2 = [];

    parents2.forEach(data => {

        opt2.push(`<option value="${data.v}">${data.m}</option>`);

    });

    document.getElementById("sel_one2").innerHTML = opt2.join("");

}</p>

<p>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("");

}</p>

<p>com_parent2();</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

다

해결완료 햇어요 ^^:;

감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

s
swallow
2년 전

잘 이해가 안되는데요 구체적으로 어떤 현상인지 스크린샷으로 설명 부탁드립니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인