Monday, September 16, 2013

Javascript Select Properties and Methods



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[]
An HTMLCollection of Options objects containing each option within this SELECT element.

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") ;

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.