Jquery's option operation on select

Posted on: http://my.oschina.net/crazybird/blog/36491

Http://space.itpub.net/26481450/viewspace-744409

Jquery has powerful functions. The following describes the usage of select elements in jquery operation forms:

Jquery gets the select element and selects the text and value:

1. $ ("# select_id"). Change (function () {// code...}); // Add an event for select, triggered when one of the select events is selected
2. var checktext = $ ("# select_id"). Find ("option: Selected"). Text (); // obtain the selected text
3. var checkvalue = $ ("# select_id"). Val (); // obtain the value selected by select
4. var checkindex = $ ("# select_id"). Get (0). selectedindex; // obtain the index value selected by select
5. var maxindex = $ ("# select_id option: Last"). ATTR ("Index"); // obtain the largest index value of select.

Jquery gets the select element and sets the text and value:
Instance analysis:
1. $ ("# select_id"). Get (0). selectedindex = 1; // select an item whose select index value is 1
2. $ ("# select_id"). Val (4); // select an item whose value is set to 4.
3. $ ("# select_id option [TEXT = 'jquery ']"). ATTR ("selected", true); // set the select text value to jquery.

Jquery adds/deletes the option entry of the select element:
Instance analysis:
1. $ ("# select_id"). append ("<option value = 'value'> text </option>"); // append an option for select (drop-down)
2. $ ("# select_id "). prepend ("<option value = '0'> select </option>"); // insert an option for select (first position)
3. $ ("# select_id option: Last"). Remove (); // Delete the largest option (last) index value in select)
4. $ ("# select_id option [Index = '0']"). Remove (); // Delete the option with the index value 0 in select (the first option)
5. $ ("# select_id option [value = '3']"). Remove (); // Delete the option with value = '3' In the SELECT statement
6. $ ("# select_id option [TEXT = '4']"). Remove (); // Delete the option of '4' text = '4' in select

Clear select:

$("#nowamagic").empty();

Level 3 Classification <select name = "thirdlevel" id = "thirdlevel"
Onchange = "getfourthlevel ()">
<Option value = "0" id = "thirdoption">
Select Level 3 Category
</Option>
</SELECT>
</Div>

Level 4:
<Select name = "fourthlevelid" id = "fourthlevelid">
<Option value = "0" id = "fourthoption">
Select level 4
</Option>
</SELECT>

</Div>

. If ($ ("# thirdlevel"). Val ()! = 0 ){
$ ("# Thirdlevel option [value! = 0] "). Remove ();
}
If ($ ("# fourthlevelid"). Val ()! = 0 ){
$ ("# Fourthlevelid option [value! = 0] "). Remove ();

} // This indicates: if we want to select the third type, delete it if there is data in the fourth type. If there is no data in the fourth type, the default value is in the product. I often use Ajax later!

Jquery's methods for obtaining and setting Select Options are summarized as follows: Get select first, and look at the following code: $ ("# select_id "). change (function () {// code ...}); // Add an event for select. When one of the select events is selected, VAR checktext =$ ("# select_id") is triggered "). find ("option: Selected "). text (); // obtain the textvar checkvalue selected by select = $ ("# select_id "). val (); // obtain the valuevar checkindex selected by select = $ ("# select_id "). get (0 ). selectedindex; // obtain the selected index value var maxindex =$ ("# select_id option: Last "). ATTR ("Index"); // obtain the maximum index value of select $ ("# select_id "). get (0 ). selectedindex = 1; // select $ ("# select_id") for items whose select index value is 1 "). val (4); // select a value of 4 from select $ ("# select_id option [TEXT = 'jquery ']"). ATTR ("selected", true); // select an item whose select text value is jquery
Obtain the selected text: $ ("# ddlregtype"). Find ("option: Selected"). Text ();
Obtain the value selected by the SELECT statement: $ ("# nowamagic"). Val ();
Obtain the index selected by select: $ ("# nowamagic"). Get (0). selectedindex;
Set selectjquery to add/delete select option items: $ ("# select_id "). append ("<option value = 'value'> text </option>"); // append an option for select (drop-down) $ ("# select_id "). prepend ("<option value = '0'> select </option>"); // insert an option for select (first position) $ ("# select_id option: last "). remove (); // Delete the maximum option (last) of the index values in the SELECT statement $ ("# select_id option [Index = '0']"). remove (); // delete option (first) with the index value 0 in select $ ("# select_id option [value = '3']"). remove (); // delete option $ ("# select_id option [TEXT = '4']") of value = '3' in select. remove (); // Delete the option of '4' in the SELECT statement and set the selected index in the SELECT statement: // The index is the index value $ ("# nowamagic "). get (0 ). selectedindex = index;
Set the value selected by select: $ ("# nowamagic "). ATTR ("value", "normal"); $ ("# nowamagic "). val ("normal"); $ ("# nowamagic "). get (0 ). value = value;
Set select selected text: var COUNT = $ ("# nowamagicoption"). length; For (VAR I = 0; I <count; I ++ ){
If ($ ("# nowamagic "). get (0 ). options [I]. TEXT = text) {$ ("# nowamagic "). get (0 ). options [I]. selected = true; break ;}}
Clear select: $ ("# nowamagic"). Empty ();