[HTML] select, option ํ๊ทธ ์ฃผ์ ์์ฑ๊ณผ ํน์ง
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
๊ธ ์์ ์ฌํญ์ ๋ ธ์ ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
'๐ช Programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
[AWS] VSCode์์ AWS EC2 ์๊ฒฉ ์ฐ๊ฒฐ / EC2 ๋ฉ๋ชจ๋ฆฌ ๋ถ์กฑ ํด๊ฒฐ
[AWS] VSCode์์ AWS EC2 ์๊ฒฉ ์ฐ๊ฒฐ / EC2 ๋ฉ๋ชจ๋ฆฌ ๋ถ์กฑ ํด๊ฒฐ
2024.05.29 -
[JS] ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ง๋ฆฌ์ค ๋ฌ๋ ๊ฒ์ ๊ตฌํํ๊ธฐ
[JS] ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ง๋ฆฌ์ค ๋ฌ๋ ๊ฒ์ ๊ตฌํํ๊ธฐ
2024.05.29 -
[Algorithm] ์์ด / ์กฐํฉ ๊ฐ๋ ๊ณผ ์๊ณ ๋ฆฌ์ฆ ๊ตฌํ
[Algorithm] ์์ด / ์กฐํฉ ๊ฐ๋ ๊ณผ ์๊ณ ๋ฆฌ์ฆ ๊ตฌํ
2024.05.28 -
[React] ๋ฆฌ์กํธ์์ setTimeout ๋ ํธํ๊ฒ ์ฐ๊ธฐ
[React] ๋ฆฌ์กํธ์์ setTimeout ๋ ํธํ๊ฒ ์ฐ๊ธฐ
2024.05.28