Select code from the jquery select drop-down box

Source: Internet
Author: User

<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 ;}

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.