๐ปselect box ํธ๋ค๋ง๐ป
๊ธฐ์ด ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>์
๋ ํธ ๋ฐ์ค</h1>
<select name="sel1">
<option value="f1">์ฌ๊ณผ</option>
<option value="f2">๋ธ๊ธฐ</option>
<option value="f3">๋ฐ๋๋</option>
<option value="f4">ํค์</option>
<option value="f5">๋ง๊ณ </option>
</select>
<hr>
<input type="button" value="๋ฒํผ1" name="btn1">
<input type="button" value="๋ฒํผ2" name="btn2">
<input type="button" value="๋ฒํผ3" name="btn3">
<input type="button" value="๋ฒํผ4" name="btn4">
<input type="button" value="๋ฒํผ5" name="btn5">
<script>
var sel1 = document.all.sel1;
document.all.btn1.onclick = m1;
document.all.btn2.onclick = m2;
document.all.btn3.onclick = m3;
document.all.btn4.onclick = m4;
document.all.btn5.onclick = m5;
function m1() {
}
function m2() {
}
function m3() {
}
function m4() {
}
function m5() {
}
</script>
</body>
</html>๋์ ์ผ๋ก ์์ ์ถ๊ฐํ๊ธฐ
<option> ํ๊ทธ๋ก ์์ฑํ๋ค.
var op = new Option();์ฐ๋ฆฌ ๋์๋ object๋ก ๋ณด์ด์ง๋ง ์ต์ ํ๊ทธ <option></option> ๊ฐ ์์ฑ๋๊ฒ์ด๋ค.
value์ text๋ฅผ ์ถ๊ฐํด์ค๋ค.
function m3() {
var op = new Option();
op.value = 'f6'; // <option value="f6"><option>
op.text = 'ํ์ธ์ ํ'; // <option value="f6">ํ์ธ์ ํ<option>
}
ํ์ง๋ง ๋ถ๋ชจ์ธ select ํ๊ทธ์ ์ฐ๊ฒฐ์ ํ์ง ์์ ๋ณด์ด์ง ์๋๋ค.
select ์ add๋ก <select> + <option> ์ฐ๊ฒฐ์ ํด์ค๋ค.
function m3() {
var op = new Option();
op.value = 'f6';
op.text = 'ํ์ธ์ ํ';
//<select> + <option> ์ฐ๊ฒฐ
sel1.options.add(op);
}
<option> ์ค๋ณต ์ถ๊ฐ ๋ฐฉ์งํ๊ธฐ
function m3() {
//<option> ์ค๋ณต ์ถ๊ฐ ๋ฐฉ์งํ๊ธฐ
for (var i=0; i<sel1.options.length; i++) {
if(sel1.options[i].text == 'ํ์ธ์ ํ') {
return;
}
}
var op = new Option();
op.value = 'f6';
op.text = 'ํ์ธ์ ํ';
//<select> + <option> ์ฐ๊ฒฐ
sel1.options.add(op);
}๋์ผํ ๊ฐ์ ๋ง๋๋ฉด return๋ฌธ์ผ๋ก ๋น ์ ธ๋๊ฐ๋ค.
๋์ ์ผ๋ก ์ญ์ ํ๊ธฐ
function m4() {
//๋์ ์ผ๋ก ์ญ์ ํ๊ธฐ
//index shift ๋ฐ์ํ๋ฏ๋ก ์ฃผ์ํด์ผ ํ๋ค.
// sel1.options.remove(2); //๋ฐ๋๋
//์ฌ์ฉ์๊ฐ ์ ํํ ๊ณผ์ผ ์ญ์ ํ๊ธฐ
sel1.options.remove(sel1.selectedIndex);
}
๋ฐ๋๋๋ฅผ ์ ํํ ํ ๋ฒํผ4๋ฅผ ๋๋ฅด๋ฉด ์ญ์ ๋๋ค.
๋ค์ค ์ ํ๋ ๊ฐ ์ฝ๊ธฐ
select ํ๊ทธ์ multiple size="7" ์ค์ ํด์ค๋ค.
<select name="sel1" multiple size="7">
<option value="f1">์ฌ๊ณผ</option>
<option value="f2">๋ธ๊ธฐ</option>
<option value="f3">๋ฐ๋๋</option>
<option value="f4">ํค์</option>
<option value="f5">๋ง๊ณ </option>
</select>
alert(sel1.value);์์์ ์ฌ์ฉํ ์ด ์ฝ๋๋ ๋ค์ค ์ ํ๋ ๊ฐ์ ๋ฐํํ์ง ๋ชปํ๋ค.
for๋ฌธ์ผ๋ก ์์ ํ๋ํ๋ ํ์ํด์ผ ํ๋ค.
function m5() {
for (var i=0; i<sel1.options.length; i++){
// alert(sel1.options[i].selected); //์ ํ๋์์ผ๋ฉด true ๋ฐํ, ์๋์์ผ๋ฉด false ๋ฐํ
if(sel1.options[i].selected) {
alert(sel1.options[i].text + '(' + sel1.options[i].value + ')');
}
}
}
์ ํํ ์ฌ๊ณผ์ ๋ธ๊ธฐ ๊ฐ์ ํ์ธํ ์ ์๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] DOM์ ๊ธฐ์ด (0) | 2023.10.10 |
|---|---|
| [JavaScript] ์ผ์ ์๊ฐ ํ ํจ์ ์คํ : ํ์ด๋จธ(โ ) (0) | 2023.10.10 |
| [JavaScript] radio ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] checkbox ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] ํ์๊ฐ์ ์, ์ ํจ์ฑ ๊ฒ์ฌ ์ฝ๋ (0) | 2023.10.06 |
