Properties
Properties
|
Description
|
disabled
|
Boolean value that Gets/Sets whether
this SELECT element is disabled.
Set:
document.getElementById("ddlViewBy").disabled=true;
Get:
alert(document.getElementById("ddlViewBy").disabled);
Returns True/False.
|
form
|
References the form that contains the
selection list in question.
|
length
|
Returns the number of options in the
SELECT element:
Get:
alert(document.getElementById("ddlViewBy").length);
Set:
document.getElementById("mySelect").length
=10;
|
multiple
|
Boolean that indicates whether this
SELECT allows more than one option to be selected simultaneously.
Set:
document.getElementById("ddlViewBy").multiple
= true;
Get:
alert(document.getElementById("ddlViewBy").multiple);
Returns True/False.
|
name
|
Reflects the name of the SELECT
element (the name attribute).
Get:
alert(document.getElementById("mySelect").name);
Set:
document.getElementById("ddlViewBy").name
= "NewName";
|
options[]
|
var options =
document.getElementById("ddlViewBy").options;
var all =
"";
for (var i =
0; i < options.length; i++)
{
all += options[i].text +"\n";
}
alert(all);
|
selectedIndex
|
An integer that Gets/Sets the index
of the selected option. If none is selected, -1 is returned.
If multiple options are selected, it returns the index of the first selected
option. When setting this property, the OPTION at the given position will be
selected (while any previously selected option deselected).
Get:
alert(document.getElementById("mySelect").selectedIndex);
Set:
document.getElementById("ddlViewBy")..selectedIndex
= 1;
|
size
|
An integer reflecting the number of
OPTIONs being displayed at once within this SELECT element.
Get:
alert(document.getElementById("ddlViewBy").size);
Set:
document.getElementById("mySelect").length
=2;
Size reflects the “size” attribute of
the select. If the size is not mentioned in the select, then, it will display
the size as 0.
|
type
|
A property available on all form
elements, "type" returns the type of the calling form element. For
SELECT, the two possible values are "select-one" or "select-multiple", depending on the type of selection list.
The below code gives all SELECT elements in a particular form a CSS class of
"selectclass":
Set:
document.getElementById("mySelect").multiple=true;
alert(document.getElementById("mySelect").type);
OP:select-multiple
document.getElementById("mySelect").multiple=false;
alert(document.getElementById("mySelect").type);
OP:select-one
Get:
alert(document.getElementById("ddlViewBy").multiple);
Returns True/False.
|
Select Methods
Properties
|
Description
|
remove()
|
Removes an option from
a dropdown list.
Syntax:
selectObject.remove(index)
var
x=document.getElementById("mySelect");
x.remove(x.selectedIndex);
|
add()
|
The add() method is used to add an option
to a dropdown list.
Syntax:
selectObject.add(option,before)
Adding an Option
var options =
document.getElementById("ddlViewBy").options;
//replace
1st option with a new one
options[0]=new Option("New 1st
option", "who")
//add
a new option to the end of SELECT
options[options.length] = new
Option("Optiontest", "option_value");
Adding an Option using appendChild() Method
var
select = document.getElementById("ddlViewBy");
var
option = document.createElement("option");
option.innerText
= "Kiwi";
option.value
= "one";
select.appendChild(option);
Adding an Option using Add() Method
var
select = document.getElementById("ddlViewBy");
var
option = document.createElement("option");
option.innerText
= "Kiwi";
option.value
= "one";
try
{
//
for IE earlier than version 8
select.add(option,x.options[null]);
}
Catch(e)
{
select.add(option,null);
}
Tip: For this method to work in IE8 and higher, add
a !DOCTYPE declaration to the page. Also notice the extra code for IE prior
version 8.
|
Select Option Properties and Methods
Properties
|
Description
|
length
|
Returns the number of option elements in the collection.
Get:
var
x=document.getElementById("mySelect").options;
alert(x.length);
Set:
var
x=document.getElementById("mySelect").options;
x.length=10;
|
selectedIndex
|
Sets or returns the index of the selected option in a
select object (starts at 0).
Get:
var
x=document.getElementById("mySelect").options;
alert(x.selectedIndex)
Set:
var
x=document.getElementById("mySelect").options;
x.selectedIndex=2;
|
selected
|
Boolean that specifies whether this option is currently
selected. The following looks through all OPTIONs within a SELECT to see
which one is selected (assumes only 1 can be selected at any time):
Example:
var myselect=document.getElementById("sample")
for (var i=0; i<myselect.options.length; i++){ if (myselect.options[i].selected==true){ alert("Selected Option's index: "+i) break } }
Get:
var
x=document.getElementById("mySelect").options[1];
alert(x.selected);
Set:
var
x=document.getElementById("mySelect").options[1];
x.selected=true;
|
index
|
Returns the index of this option within the
select.options[index]
property.
Ex:
var
x=document.getElementById("mySelect").options[1];
|
remove()
(Method)
|
Removes the element with the
specified index from the collection.
var
x=document.getElementById("mySelect");
x.options.remove(1);
|
add()
(Method)
|
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.
Adding an option at the end of the collection.
var
x=document.getElementById("mySelect");
x.options.add(new
Option("Hi","value"));
Adding an option at the
specified index
var
x=document.getElementById("mySelect");
x.options.add(new
Option("Hi","value"), 1);
|
Item(index)
(Method)
|
Returns the element from the
collection with the specified index
Get:
var
x=document.getElementById("mySelect");
alert(x.options.item(1).text);
Set:
var
x=document.getElementById("mySelect");
x.options.item(1).text="New
Text";
|
namedItem(name)
|
Returns the element from the
collection with the specified name (name or id attribute)
HTML:
<select
id="fruit">
<option
id="apple">Apple</option>
<option
id="peach">Peach</option>
<option
id="pear">Pear</option>
</select>
<button
onclick="GetOptionById ()">Get an option by ID</button>
Javascript:
function
GetOptionById () {
var selectTag =
document.getElementById ("fruit");
var optionTag = selectTag.namedItem
("peach");
alert ("The option with
'peach' ID is " + optionTag.text);
}
|
The
Option object allows you to add new options to your selection list using
JavaScript. To dynamically create a new option, call its constructor function:
new
Option([text], [value], [defaultSelected], [selected])
Note: ‘O’ letter in ‘new Option’
should capital letter.
All
parameters are optional:
- text: String that sets the text of the option
- value: String that sets the value attribute of the option
- defaultSelected: Boolean that sets whether this option should be the default selected option (same effect as setting the defaultSelected attribute).
- selected: Boolean that sets whether this option should be selected (same effect as setting the selected attribute).
While all
paramters are optional, typically you'll want to define at least the first two
parameter when calling new
Option().
To add a
new option to an existing SELECT element, just assign new Option() somewhere within select.options[] where you want the new option to be added.
For
example: (replace 1st option with a new one)
var
myselect=document.getElementById("sample");
myselect.options[0]=new Option("New 1st option", "who") ;
myselect.options[0]=new Option("New 1st option", "who") ;
Add a new
option to the end of SELECT
myselect.options[myselect.length]=new Option("Brand
new option", "what");
Notice how you can both replace an existing
option, or add a new one to a SELECT element this way. It serves as an
alternate method of adding/removing options to select.add() and select.remove(), with
the main benefit being it works in all browsers out of the box, including in
very old, non DOM2 legacy browsers.
No comments:
Post a Comment