<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
// 항목 추가하기
function displayResult()
{
var x=document.getElementById("mySelect");
var option=document.createElement("option");
option.text="Kiwi";
option.value="5";
try
{
// for IE earlier than version 8
x.add(option,x.options[null]);
}
catch (e)
{
x.add(option,null);
}
alert(document.getElementById("mySelect").value);
}
// 전부 삭제하기
function RemoveAll()
{
var x=document.getElementById("mySelect");
while (x.options.length > 0)
selectObject.remove(0);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option value="1">Apple</option>
<option value="2">Pear</option>
<option value="3">Banana</option>
<option value="4">Orange</option>
</select>
</form>
<br />
<button type="button" onclick="displayResult()">Insert option</button>
<p><b>Tip:</b> For the add() method to work properly in IE8 and higher, add a !DOCTYPE declaration to the page. Also notice the extra code for IE prior version 8.</p>
</body>
</html>
관련자료 - http://www.w3schools.com/jsref/met_select_add.asp
HTML DOM Select Object
Select Object
The Select object represents a dropdown list in an HTML form.
A dropdown list lets a user select one or more options of a limited number of choices.
For each <select> tag in an HTML form, a Select object is created.
You can access a Select object by searching through the elements[] array of a form, or by using document.getElementById().
Note: The Select object can also use the properties/methods of:
Select Object Collections
W3C: W3C Standard.
| Collection | Description | W3C |
|---|---|---|
| options | Returns a collection of all the options in a dropdown list | Yes |
Select Object Properties
| Property | Description | W3C |
|---|---|---|
| disabled | Sets or returns whether the dropdown list is disabled, or not | Yes |
| form | Returns a reference to the form that contains the dropdown list | Yes |
| length | Returns the number of options in a dropdown list | Yes |
| multiple | Sets or returns whether more than one item can be selected from the dropdown list | Yes |
| name | Sets or returns the name of a dropdown list | Yes |
| selectedIndex | Sets or returns the index of the selected option in a dropdown list | Yes |
| size | Sets or returns the number of visible options in a dropdown list | Yes |
| type | Returns which type of form element a dropdown list is | Yes |
Select Object Methods
| Method | Description | W3C |
|---|---|---|
| add() | Adds an option to a dropdown list | Yes |
| remove() | Removes an option from a dropdown list | Yes |
Standard Properties and Events
The Select object also supports the standard properties and events.
Select options Collection
Definition and Usage
The options collection returns an array of all the options in a dropdown list.
Note: There will be one array element for each <option> tag - starting at 0.
Syntax
Properties
| Property | Description |
|---|---|
| length | Returns the number of option elements in the collection |
| selectedIndex | Sets or returns the index of the selected option in a select object (starts at 0) |
Methods
| Method | Description |
|---|---|
| [index] | An integer that specifies the element to retrieve (starts at 0) |
| [add(element[,index])] | Adds an option element into the collection at the specified index. If no index is specified, it inserts the option element at the end of the collection |
| item(index) | Returns the element from the collection with the specified index |
| namedItem(name) | Returns the element from the collection with the specified name (name or id attribute) |
| remove(index) | Removes the element with the specified index from the collection |
Browser Support
The options collection is supported in all major browsers.
'WEB' 카테고리의 다른 글
| HTML 텍스트 줄바꿈 (0) | 2012.07.29 |
|---|---|
| HTML IMAGE RESIZE (0) | 2012.07.29 |
| HTML SELECT OPTION (0) | 2012.07.29 |
| Cannot create JDBC driver of class '' form connect URL 'null' (3) | 2012.07.29 |
| HTML TEXTAREA 글자수 제한 (0) | 2012.07.29 |