Home > Web Front-end > JS Tutorial > Summary of JQuery select (drop-down box) operation methods_jquery

Summary of JQuery select (drop-down box) operation methods_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 16:04:00
Original
1362 people have browsed it

1. Get selected items:
Get the Value of the selected item:

Copy code The code is as follows:

$('select#sel option:selected').val();

or
Copy code The code is as follows:

$('select#sel').find('option:selected').val();

Get the Text value of the selected item:
Copy code The code is as follows:

$('select#seloption:selected').text();

or
Copy code The code is as follows:

$('select#sel').find('option:selected').text();

2. Get the index value of the currently selected item:
Copy code The code is as follows:

$('select#sel').get(0).selectedIndex;

3. Get the maximum index value of the current option:
Copy code The code is as follows:

$('select#sel option:last').attr("index")

4. Get the length of DropdownList:
Copy code The code is as follows:

$('select#sel')[0].options.length;

or
Copy code The code is as follows:

$('select#sel').get(0).options.length;

5. Set the first option as the selected value:
Copy code The code is as follows:

$('select#sel option:first').attr('selected','true')

or
Copy code The code is as follows:

$('select#sel')[0].selectedIndex = 0;

6. Set the last option as the selected value:
Copy code The code is as follows:

$('select#sel option:last).attr('selected','true')

7. Set any option as the selected value based on the index value:
Copy code The code is as follows:

$('select#sel')[0].selectedIndex =index value; index value=0,1,2....

8. Set the option with Value=4 as the selected value:
Copy code The code is as follows:

$('select#sel').attr('value','4');

or
Copy code The code is as follows:

$("select#sel option[value='4']").attr('selected', 'true');

9. Delete option with Value=3:
Copy code The code is as follows:

$("select#sel option[value='3']").remove();

10. Which option to delete:
Copy code The code is as follows:

$(" select#sel option ").eq(index value).remove(); index value=0,1,2....

If you want to delete the 3rd Radio:
Copy code The code is as follows:

$(" select#sel option ").eq(2).remove();

11. Delete the first option:
Copy code The code is as follows:

$(" select#sel option ").eq(0).remove();

or
Copy code The code is as follows:

$("select#sel option:first").remove();

12. Delete the last option:
Copy code The code is as follows:

$("select#sel option:last").remove();

13. Delete dropdownlist:
Copy code The code is as follows:

$("select#sel").remove();

14. Add an option after select:
Copy code The code is as follows:

$("select#sel").append("");

15. Add an option in front of select:
Copy code The code is as follows:

$("select#sel").prepend("");

16. Traverse options:
Copy code The code is as follows:

$(' select#sel option ').each(function (index, domEle) {
//Write code
});
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template