<Select name = 'sel 'id = 'sel'>
<Option value = '1 & prime;> 1 </option>
<Option value = '2 & prime; selected = 'selected'> I have been selected </option>
<Option value = '3 & prime;> 2 </option>
</Select>
<Script>
Alert ($ ("select [@ name = 'sel '] option [@ selected]"). text ());
$ ("# Sel"). val ('2 & prime ;);
Alert ($ ("select [@ name = 'sel '] option [@ selected]"). text ());
</Script>
You can also use alert ($ ("# sel option [@ selected]"). text () to query the content of the selected option ());
A little explanation:
Select [@ name = 'sel '] option [@ selected] indicates the option element with the selected attribute in the select element with the name attribute and the attribute value of 'sel; it can be seen that the attribute is followed by the @ parameter.
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 ;}