It's a very simple code, but when I operate it myself, I find that I still don't know much about it. I need to discover problems only when I use multiple practical applications ~~ Jquery's selector is very powerful. I found it only after a long time when I added the select options object.
The Code is as follows:
/**//*
File Name: jquery. liu. select. js
Function Description: This js file is a plug-in of the jquery class library and mainly implements select operations.
Author: John Liu
Written on: 2008/03/12
*/
// Obtain the number of select items
JQuery. fn. size = function ()
{
Return jQuery (this). get (0). options. length;
}
// Obtain the index of the selected item
JQuery. fn. getSelectedIndex = function ()
{
Return jQuery (this). get (0). selectedIndex;
}
// Obtain the text of the selected item
JQuery. fn. getSelectedText = function ()
{
If (this. size () = 0)
{
Return "no options in the drop-down box ";
}
Else
{
Var index = this. getSelectedIndex ();
Return jQuery (this). get (0). options [index]. text;
}
}
// Obtain the value of the selected item
JQuery. fn. getSelectedValue = function ()
{
If (this. size () = 0)
{
Return "No selected value in the drop-down box ";
}
Else
{
Return jQuery (this). val ();
}
}
// Set the item with the value in the select statement to the selected one.
JQuery. fn. setSelectedValue = function (value)
{
JQuery (this). get (0). value = value;
}
// The first item that sets the select Chinese text as text is selected
JQuery. fn. setSelectedText = function (text)
{
Var isExist = false;
Var count = this. size ();
For (var I = 0; I {
If (jQuery (this). get (0). options [I]. text = text)
{
JQuery (this). get (0). options [I]. selected = true;
IsExist = true;
Break;
}
}
If (! IsExist)
{
Alert ("This item does not exist in the drop-down list ");
}
}
// Set the selected index
JQuery. fn. setSelectedIndex = function (index)
{
Var count = this. size ();
If (index> = count | index <0)
{
Alert ("the selected index is out of range ");
}
Else
{
JQuery (this). get (0). selectedIndex = index;
}
}
// Determine whether the select item has an item with the value
JQuery. fn. isExistItem = function (value)
{
Var isExist = false;
Var count = this. size ();
For (var I = 0; I {
If (jQuery (this). get (0). options [I]. value = value)
{
IsExist = true;
Break;
}
}
Return isExist;
}
// Add an item to select. The displayed content is text and the value is value. If the value already exists, a prompt is displayed.
JQuery. fn. addOption = function (text, value)
{
If (this. isExistItem (value ))
{
Alert ("the value of the item to be added already exists ");
}
Else
{
JQuery (this). get (0). options. add (new Option (text, value ));
}
}
// Delete the item with the value in the select statement. If this item does not exist, a prompt is displayed.
JQuery. fn. removeItem = function (value)
{
If (this. isExistItem (value ))
{
Var count = this. size ();
For (var I = 0; I {
If (jQuery (this). get (0). options [I]. value = value)
{
JQuery (this). get (0). remove (I );
Break;
}
}
}
Else
{
Alert ("the item to be deleted does not exist! ");
}
}
// Delete the specified index in the select statement.
JQuery. fn. removeIndex = function (index)
{
Var count = this. size ();
If (index> = count | index <0)
{
Alert ("the index to be deleted is out of range ");
}
Else
{
JQuery (this). get (0). remove (index );
}
}
// Delete the selected items in the select statement.
JQuery. fn. removeSelected = function ()
{
Var index = this. getSelectedIndex ();
This. removeIndex (index );
}
// Clear all items in the select statement
JQuery. fn. clearAll = function ()
{
JQuery (this). get (0). options. length = 0;
}