jQuery / 동적 셀렉트(select) 만드는 방법
앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것.
아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다.
- onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다.
- 변수 a에는 A를 선택했을 때 나올 값을, 변수 b에는 B를 선택했을 때 나올 값을 담는다.
- v에 첫 번째 select의 value를 담는다.
- v 값에 따라 o에 값을 담는다.
- 두 번째 select의 option을 모두 지우고 빈 option 하나를 추가한다.
- append를 이용하여 o에 담긴 값들을 option으로 추가한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Script</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <p> <select id="s1" onchange="optionChange();"> <option></option> <option value="a">A</option> <option value="b">B</option> </select> <select id="s2"> <option></option> </select> </p> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> function optionChange() { var a = ['A-1','A-2','A-3']; var b = ['B-1','B-2','B-3']; var v = $( '#s1' ).val(); var o; if ( v == 'a' ) { o = a; } else if ( v == 'b' ) { o = b; } else { o = []; } $( '#s2' ).empty(); $( '#s2' ).append( '<option></option>' ); for ( var i = 0; i < o.length; i++ ) { $( '#s2' ).append( '<option>' + o[ i ] + '</option>' ); } } </script> </body> </html>