[JavaScript - 기능 - (8) ] select box선택에 따라 다음 select box 영향 주는 방법.

---

참고 : https://whitekeyboard.tistory.com/212?category=809483( .hide() / .show() 라디오 버튼 선택에 따른 div 보이기/숨기기 )

---

실행 결과 : https://www.w3schools.com/code/tryit.asp?filename=GCZ8YS6ZWWKZ

 

<select onchange="categoryChange(this)">
    <option>걸그룹을 선택해주세요</option>
    <option value="a">블랙핑크</option>
    <option value="b">에프엑스</option>
    <option value="c">EXID</option>
</select>
 
<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>
 
 
<script>
    function categoryChange(e) {
    var good_a = ["지수", "제니", "로제", "리사"];
    var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
    var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
    var target = document.getElementById("good");
 
    if(e.value == "a") var d = good_a;
    else if(e.value == "b") var d = good_b;
    else if(e.value == "c") var d = good_c;
 
    target.options.length = 0;
 
    for (x in d) {
        var opt = document.createElement("option");
        opt.value = d[x];
        opt.innerHTML = d[x];
        target.appendChild(opt);
    }    
}
</script>