๋ฐ˜์‘ํ˜•

Option ์ƒ์„ฑ์ž ํ•จ์ˆ˜ | MDN


๐Ÿ’ก HTML ์˜ต์…˜ ํƒœ๊ทธ์˜ selected ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ ‘๊ทผํ•˜๋Š” option.selected ์†์„ฑ(ํ”„๋กœํผํ‹ฐ)์€ ์„œ๋กœ ๋…๋ฆฝ์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„๋‹ค. ์˜ต์…˜ ํƒœ๊ทธ์˜ selected ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” ์ดˆ๊ธฐ ์„ ํƒ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ณ , option.selected ์†์„ฑ์€ ํ˜„์žฌ ์„ ํƒ ์ƒํƒœ๋ฅผ ๋ฐ˜์˜ํ•˜๊ณ  ์ œ์–ดํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.

// Option ์ƒ์„ฑ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด document.createElement() ๋ณด๋‹ค ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค
new Option(text?, value?, defaultSelected?, selected?)

 

โ—ผ๏ธŽ text : ์˜ต์…˜ ์š”์†Œ์— ํ‘œ์‹œํ•  ํ…์ŠคํŠธ | ๊ธฐ๋ณธ๊ฐ’ "" ๋นˆ ๋ฌธ์ž์—ด
text์— ์ง€์ •ํ•œ ๊ฐ’์€ option.textContent๋กœ ์„ค์ •๋œ๋‹ค.


โ—ผ๏ธŽ value : ์˜ต์…˜ ์š”์†Œ์˜ value ์†์„ฑ | ์ƒ๋žต์‹œ text ๊ฐ’ ์‚ฌ์šฉ
์…€๋ ‰ํŠธ ๋ฐ•์Šค์—์„œ ์˜ต์…˜์„ ์„ ํƒํ•˜๋ฉด ํ•ด๋‹น ์˜ต์…˜์˜ value ๊ฐ’์ด select.value์— ์ €์žฅ๋œ๋‹ค.


โ—ผ๏ธŽ defaultSelected : ์ดˆ๊ธฐ ์„ ํƒ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” boolean | ๊ธฐ๋ณธ๊ฐ’ false
true ์ง€์ • ์‹œ ์˜ต์…˜ ํƒœ๊ทธ์— selected ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๊ฐ€ ์ถ”๊ฐ€๋œ๋‹ค. ํ•˜์ง€๋งŒ selected (4๋ฒˆ์งธ)์ธ์ž๋ฅผ ์ƒ๋žตํ•˜๋ฉด ์…€๋ ‰ํŠธ ๋ฐ•์Šค์—์„  ์˜ต์…˜์„ ์„ ํƒํ•˜์ง€ ์•Š์€ ์ƒํƒœ๋กœ ํ‘œ์‹œํ•˜๊ณ  select.value ์†์„ฑ์—๋„ ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰, ์˜ต์…˜ ํƒœ๊ทธ์˜ selected ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” defaultSelected ๊ฐ’์„ true๋กœ ์ง€์ •ํ–ˆ์„ ๋•Œ๋งŒ ์ถ”๊ฐ€๋œ๋‹ค.

๋งŒ์•ฝ option.defaultSelected ๊ฐ’์„ true๋กœ ์ง์ ‘ ํ• ๋‹นํ•˜๋ฉด ์…€๋ ‰ํŠธ ๋ฐ•์Šค๋Š” ์˜ต์…˜์„ ์„ ํƒํ•œ ์ƒํƒœ๊ฐ€ ๋˜๊ณ , option.selected ์†์„ฑ๋„ true๋กœ ๋ณ€๊ฒฝ๋œ๋‹ค. option.selected ์†์„ฑ์ด true๋กœ ๋ณ€๊ฒฝ๋์œผ๋ฏ€๋กœ select.value ์—๋„ ๋ฐ˜์˜๋œ๋‹ค. ์ด์ฒ˜๋Ÿผ ์ง์ ‘ ํ• ๋‹น์€ Option ์ƒ์„ฑ์ž ์ž‘๋™ ๋ฐฉ์‹๊ณผ ์‚ด์ง ๋‹ค๋ฅด๋ฏ€๋กœ ์ฃผ์˜ํ•˜์ž. 

์–ด๋– ํ•œ ์˜ต์…˜๋„ ์„ ํƒ๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด ์ฒ˜์Œ ๋กœ๋“œ์‹œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฒซ ๋ฒˆ์งธ ์˜ต์…˜์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ ํƒํ•œ๋‹ค. ์ด๋•Œ ์˜ต์…˜ ์š”์†Œ์˜ defaultSelected ์†์„ฑ์—” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ณ , selected ์†์„ฑ๋งŒ true๊ฐ€ ๋œ๋‹ค.

โ—ผ๏ธŽ selected : ํ˜„์žฌ ์„ ํƒ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” boolean | ๊ธฐ๋ณธ๊ฐ’ false
true ์ง€์ •์‹œ ์…€๋ ‰ํŠธ ๋ฐ•์Šค์—์„œ ํ•ด๋‹น ์˜ต์…˜์„ ์„ ํƒํ•œ ์ƒํƒœ๋กœ ํ‘œ์‹œํ•˜๊ณ  option.selected ์†์„ฑ์€ true ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. option.selected ์†์„ฑ ๊ฐ’์ด true์—ฌ๋„(์…€๋ ‰ํŠธ ๋ฐ•์Šค์—์„œ ์˜ต์…˜์„ ์„ ํƒํ•œ ์ƒํƒœ) HTML ์˜ต์…˜ ํƒœ๊ทธ์—๋Š” selected ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๊ฐ€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๋‹ค.

 

 

<select> ์ฃผ์š” ์†์„ฑ | MDN


๐Ÿ’ก ์˜ต์…˜ ์š”์†Œ๋ฅผ ๋™์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ๋• select.add(option|optiongroup) ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค | MDN

 

โ—ผ๏ธŽ name : ์…€๋ ‰ํŠธ ๋ฐ•์Šค(๋“œ๋กญ๋‹ค์šด ๋ชฉ๋ก)์˜ ์ด๋ฆ„

ํผ ์ œ์ถœ์‹œ ์„œ๋ฒ„์—์„œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•œ ์ด๋ฆ„. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์š”์†Œ๋ฅผ ์ฐธ์กฐํ•  ๋•Œ๋„ ์‚ฌ์šฉ๋œ๋‹ค.

 

โ—ผ๏ธŽ options : ์˜ต์…˜ ๋ชฉ๋ก HTMLCollection (์œ ์‚ฌ๋ฐฐ์—ด)

 

โ—ผ๏ธŽ value : ํ˜„์žฌ ์„ ํƒํ•œ ์˜ต์…˜์˜ value

 

โ—ผ๏ธŽ selectedIndex : ํ˜„์žฌ ์„ ํƒํ•œ ์˜ต์…˜์˜ ์ธ๋ฑ์Šค | ์„ ํƒํ•œ ์˜ต์…˜ ์—†์œผ๋ฉด -1 ๋ฐ˜ํ™˜

 

โ—ผ๏ธŽ selectedOptions : ํ˜„์žฌ ์„ ํƒํ•œ ์˜ต์…˜ ์š”์†Œ๋“ค์ด ํฌํ•จ๋œ HTMLCollection

multiple ์†์„ฑ์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ ์˜ต์…˜์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ชฉ๋ก ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ

 

โ—ผ๏ธŽ multiple : ์—ฌ๋Ÿฌ ์˜ต์…˜์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋„๋ก ํ• ์ง€ ์—ฌ๋ถ€ | ๊ธฐ๋ณธ๊ฐ’ false

true ์ง€์ •์‹œ โŒ˜(์œˆ๋„์šฐ๋Š” Ctrl) + Click์œผ๋กœ ์—ฌ๋Ÿฌ ์˜ต์…˜ ์„ ํƒ ๊ฐ€๋Šฅ

 

โ—ผ๏ธŽ size : ์…€๋ ‰ํŠธ ๋ฐ•์Šค์— ๋ช‡ ๊ฐœ์˜ ์˜ต์…˜์„ ํ‘œ์‹œํ• ์ง€ ์ง€์ • | ๊ธฐ๋ณธ๊ฐ’ 0

 


๊ธ€ ์ˆ˜์ •์‚ฌํ•ญ์€ ๋…ธ์…˜ ํŽ˜์ด์ง€์— ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”
๋ฐ˜์‘ํ˜•