고정 헤더 영역
상세 컨텐츠
본문
1. DOM API 활용
var opt = document.createElement("option");
// 속성추가
opt.value = 0; // <option value='0'></option>
var text = document.createTextNode("졸림");
// text를 option에 추가
opt.appendChild(text); // <option value='0'>졸림</option>
selEle.appendChild(opt);
2. 자바스크립트 내장객체 활용
// options 배열에 다음 항목 추가, new Option(text, value);
selEle.options[selEle.options.length] = new Option("배고파", "100");
3. innerHTML 활용
selEle.innerHTML += "<option value='100'>테스트</option>";
소스
<body>
<form action="a.html" name="mForm">
<button type="button" onclick="doAdd();">추가</button>
<button type="button" onclick="doDel();">삭제</button>
<button type="button" onclick="changeDisabled(true);">비활성화</button>
<button type="button" onclick="changeDisabled(false);">활성화</button>
<br />
<br />
<div>
<select name="sel">
<option value="">선택하세요</option>
</select>
</div>
</form>
<script>
function doAdd() {
//var selEle = document.querySelector("select");
var selEle = document.mForm.sel;
selEle.options[selEle.options.length] = new Option("배고파", "100");
}
function doDel() {
var sel = document.mForm.sel;
// 마지막 option 삭제
//sel.options[sel.options.length-1] = null;
// 전부 삭제
sel.options.length = 1;
}
function changeDisabled(flag) {
var selEle = document.mForm.sel;
if (flag) selEle.selectedIndex = 0;
// disabled 에서는 서버 전송 안됨
selEle.disabled = flag;
}
</script>
</body>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - window 객체 활용(open, moveBy, resizeTo, onunload) (0) | 2020.06.04 |
|---|---|
| JavaScript - window 객체 (0) | 2020.06.04 |
| JavaScript - select 객체(selectedIndex, options) (0) | 2020.06.04 |
| JavaScript - checkbox 상태 확인(checked) (0) | 2020.06.04 |
| JavaScript - 폼 데이터 체크 후 서브밋 하기(onsubmit) (0) | 2020.06.04 |
댓글 영역