WEB Archive
[HTML] Javascript - select, option 선택한 값을 추출하여 리스트 만들어보기
universedevelope
2024. 8. 21. 14:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031.html</title>
<style type="text/css">
/* 나의 스타일.. 명령 프롬프트 */
*
{
background-color: white;
font-family: 나눔고딕코딩;
font-size: 20pt;
color: #ababab;
font-weight: bold;
}
h1
{
font-size: 40pt;
color: #ababab;
margin: 0%;
}
hr
{
background-color: #ababab;
height: 15px;
}
input.btn
{
width: 150.5px;
background-color: black;
text-align: center;
}
input.btn:hover
{
background-color: tomato;
color: white;
}
input.txtbox
{
width: 200px;
text-align: center;
}
input.txtbox:hover
{
background-color: skyblue;
color: white;
}
select.txtbox
{
width: 208px; text-align: center;
}
</style>
<script type="text/javascript">
function selectTest()
{
alert("11");
/*
// 첫 번째 방법
var position = document.getElementById("userPosition").value;
// 확인
// alert(position); --==>> vfr(사원)
*/
// 두 번째 방법
/*
var positionObj = document.getElementById("userPosition");
var positionOptions = positionObj.options;
var positionMsg = "";
// alert(positionOptions); [object HTMLOptionsCollection] 자바스크립트 배열반환
// alert(positionOptions.length); 4 select 요소 가 4개
for (var i = 0; i < positionOptions.length; i++) // 0 1 2 3
{
//alert(positionOptions[i].selected);
// f f f t(사원)
// 선택된 옵션 항목에 따라 true / false 형태로 확인
if (positionOptions[i].selected)
{
// 단일 선택일 때
//positionMsg = positionOptions[i].value;
//break;
// 다중 선택
//positionMsg += positionOptions[i].value + " ";
}
}
*/
//alert(positionMsg);
// 세 번째 방법
/*
var positionObj = document.getElementById("userPosition");
// 확인
//alert(positionObj.selectedIndex); // 0 1 2 3 (인덱스반환)
// 부장 → 0 과장 → 1 대리 → 2 사원 → 3
// alert(positionObj.options[2].value); 대리
var positionMsg = positionObj.options[positionObj.selectedIndex].value;
alert(positionMsg);
*/
}
function addMember()
{
//alert("함수 호출 확인~!!");
var uName = document.getElementById("userName").value;
var uSsn = document.getElementById("userSsn").value;
//var uCity = document.getElementById("userCity").value;
var cityObj = document.getElementById("userCity");
//alert(cityObj.selectedIndex);
// --==>> 서울→0, 대전→1, 광주→2, 대구→3
//alert(cityObj.options[cityObj.selectedIndex].value);
// 2380(대전)
var uCity = cityObj.options[cityObj.selectedIndex].value;
//alert("1");
var buseoObj = document.getElementById("userDepartment");
var uBuseo = buseoObj.options[buseoObj.selectedIndex].value;
//alert("2");
var positionObj = document.getElementById("userPosition");
var uPosition = positionObj.options[positionObj.selectedIndex].value;
//alert(uPosition);
var uBasicPay = document.getElementById("userBasicPay").value;
// 테이블 그리기 ---------------------------------------
var tableNode = document.getElementById("memberList");
var trNode = document.createElement("tr");
trNode.appendChild(createTdNode(uName));
trNode.appendChild(createTdNode(uSsn));
trNode.appendChild(createTdNode(uCity));
trNode.appendChild(createTdNode(uBuseo));
trNode.appendChild(createTdNode(uPosition));
trNode.appendChild(createTdNode(uBasicPay));
tableNode.appendChild(trNode);
// --------------------------------------- 테이블 그리기
// formClear(); //check ~!!
document.forms[0].reset();
document.getElementById("userName").focus();
}
function createTdNode(val)
{
var textNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(textNode);
return tdNode;
}// end of createTdNode()
/*
function formClear()
{
document.getElementById("userName").value = "";
document.getElementById("userSsn").value = "";
var cityObj = document.getElementById("userCity");
cityObj.options[0].selected = true;
var buseoObj = document.getElementById("userDepartment");
buseoObj.options[3].selected = true;
var jikwiObj = document.getElementById("userPosition");
jikwiObj.options[3].selected = true;
document.getElementById("userBasicPay").value = "";
}
*/
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>선택목록(select) 다루기</h2>
<form>
<table>
<tr>
<td>이름</td>
<td>
<input type = "text" id = "userName" class = "txtbox">
</td>
</tr>
<tr>
<td>주민번호</td>
<td>
<input type = "text" id = "userSsn" class = "txtbox">
</td>
</tr>
<tr>
<td>지역</td>
<td>
<!-- <input type = "text" id = "userCity" class = "txtbox"> -->
<select id ="userCity" class = "txtbox">
<option value = "1123(서울)">서울</option>
<option value = "2380(대전)">대전</option>
<option value = "5567(광주)">광주</option>
<option value = "9984(대구)">대구</option>
</select>
</td>
</tr>
<tr>
<td>부서</td>
<td>
<!-- <input type = "text" id = "userDepartment" class = "txtbox"> -->
<select id ="userDepartment" class = "txtbox">
<option value = "9987(개발부)">개발부</option>
<option value = "9988(인사부)">인사부</option>
<option value = "9989(자재부)">자재부</option>
<option value = "9990(영업부)" selected = "selected">영업부</option>
<option value = "9991(총무부)">총무부</option>
</select>
</td>
</tr>
<tr>
<td>직위</td>
<td>
<!-- <input type = "text" id = "userPosition" class = "txtbox"> -->
<select id = "userPosition" class = "txtbox">
<option value = "zaq(부장)">부장</option>
<option value = "xsw(과장)">과장</option>
<option value = "cde(대리)">대리</option>
<option value = "vfr(사원)" selected = "selected">사원</option>
</select>
</td>
</tr>
<tr>
<td>기본급</td>
<td>
<input type = "text" id = "userBasicPay" class = "txtbox">
</td>
</tr>
</table>
<!--<input type = "button" value = "직원 추가" class = "btn" onclick = "selectTest()"> -->
<input type = "button" value = "직원 추가" class = "btn" onclick = "addMember()">
<input type = "reset" value = "입력 취소" class = "btn">
<br>
<br>
<table id = "memberList" border = "1">
<tr>
<td>이름</td>
<td>주민번호</td>
<td>지역</td>
<td>부서</td>
<td>직위</td>
<td>기본급</td>
</tr>
</table>
</form>
</div>
</body>
</html>728x90