Jquery Select operations

JQuery makes it easier for us to operate HTML elements. We thought we were familiar with the Select operation, but we didn't know much about it in the morning.

After reading some jQuery methods, I found some common methods listed below:

// Obtain the value of the first option
$ ('# Test option: first'). val ();
// The value of the last option
$ ('# Test option: last'). val ();
// Obtain the value of the second option
$ ('# Test option: eq (1)'). val ();
// Obtain the selected value
$ ('# Test'). val ();
$ ('# Test option: selected'). val ();
// Option with the value of 2 is selected
$ ('# Test'). attr ('value', '2 ');
// Set the first option to selected
$ ('# Test option: last'). attr ('selected', 'selected ');
$ ("# Test"). attr ('value', $ ('# test option: la'). val ());
$ ("# Test "). attr ('value', $ ('# test option '). eq ($ ('# test option '). length-1 ). val ());
// Obtain the select Length
$ ('# Test option'). length;
// Add an option
$ ("# Test"). append ("<option value = '9'> ff </option> ");
$ ("<Option value = '9'> ff </option>"). appendTo ("# test ");
// Add the selected item
$ ('# Test option: selected'). remove ();
// Select a specified item
$ ('# Test option: first'). remove ();
// The specified value is deleted.
$ ('# Test option'). each (function (){
If ($ (this). val () = '5 '){
$ (This). remove ();
}
});
$ ('# Test option [value = 5]'). remove ();

// Obtain the label of the first Group
$ ('# Test optgroup: eq (0)'). attr ('label ');
// Obtain the value of the first option in the second group
$ ('# Test optgroup: eq (1): option: eq (0)'). val ();

Obtains the value related to the selected text in the select statement.

Obtain the selected Text: var checkText = $ ("# slc1"). find ("option: selected"). text ();
Obtain the value selected by select: var checkValue = $ ("# slc1"). val ();
Obtain the index value selected by select: var checkIndex = $ ("# slc1"). get (0). selectedIndex;
Obtain the largest index value of select: var maxIndex =$ ("# slc1 option: last"). attr ("index ");

Set the Text and Value selected by select

Select an item whose select index value is 1: $ ("# slc1"). get (0). selectedIndex = 1;
Select an item whose value is 4: $ ("# slc1"). val (4 );
Set the select Text value to JQuery:
$ ("# Slc1 option [text = 'jquery ']"). attr ("selected", true );
PS: pay special attention to the use of the third item. Look at JQuery's selector feature so powerful!

Add and delete option items

Append an Option to select (drop-down)
$ ("# Slc2"). append ("<option value = '" + I + "'>" + I + "</option> ");
Insert an option for select (first position)
$ ("# Slc2"). prepend ("<option value = '0'> select </option> ");
PS: prepend this is the best way to insert content to the beginning of all matching elements.
Delete the maximum option (last one) of the index values in the select statement)
$ ("# Slc2 option: last"). remove ();
Delete option (first) with index value 0 in select)
$ ("# Slc2 option [index = '0']"). remove ();
Delete option with value = '3' in select
$ ("# Slc2 option [value = '3']"). remove ();
Delete the option of '4' text = '4' in the select statement.
$ ("# Slc2 option [text = '3']"). remove ();

Some related supplementary materials:
Jquery's Select operation is simple and convenient for a js plug-in.
JQuery select tag operation code segment