Share the Code with you:
JavaScript code
Copy codeThe Code is as follows: // 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 <count; 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 <count; 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 <count; 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;
}
When using the plug-in, first introduce the jquery. js file, then introduce the jquery. liu. select. js file, and then call the plug-in method. For example, if you want to clear all the items in the drop-down box with the id of selEmail, you can do this: $ ("# selEmail"). clearAll ();
Note: The method in this plug-in has been verified in ie7 and firefox. If there are errors and improvements, I hope you can correct them.
