제목 : 활용예제 : 드롭다운리스트(콤보박스) 항목 추가 및 삭제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/// <summary>
/// 드롭다운리스트(콤보박스) 항목 추가 및 삭제
/// 파일명 : FrmAddRemoveItem.htm
/// </summary>
// 드롭다운리스트에 텍스트박스에 입력한 항목을 추가하는 샘플 코드 조각
function AddItem() {
var varFavorite = document.getElementById("txtFavorite");
if (document.getElementById("txtFavorite").value != "") {
// 항목 추가 : Text/Value 구분
document.getElementById("lstFavorite").options.add(
new Option(varFavorite.value, varFavorite.value));
document.getElementById("lblCount").innerHTML =
document.getElementById("lstFavorite").options.length + "개";
varFavorite.value = "";
varFavorite.focus();
}
else {
window.alert("관심사항을 입력하시오.");
}
}
// 드롭다운리스트에서 선택한 항목을 삭제하는 샘플 코드 조각
function RemoveItem() {
var varFavorite = document.getElementById("lstFavorite").options;
for (var i = 0; i < varFavorite.length; i++) {
if (varFavorite[i].selected) {
varFavorite.remove(i);
i--;
}
}
document.getElementById("lblCount").innerHTML =
document.getElementById("lstFavorite").options.length + "개";
}
</script>
</head>
<body>
<h3>드롭다운리스트(콤보박스) 항목 추가 및 삭제</h3>
관심사항 : <input type="text" id="txtFavorite" />
<input type="button" value="추가" onclick="AddItem();" /><hr />
<label id="lblCount"></label><br />
<select id="lstFavorite" multiple="multiple" size="4">
<option value="C#">C#</option>
<option value="ASP.NET">ASP.NET</option>
<option value="Silverlight">Silverlight</option>
</select>
<input type="button" value="삭제" onclick="RemoveItem();" />
</body>
</html>