Jquery Select operation method collection script home special edition_jquery

The jQuery framework makes it easier for us to operate HTML elements. I originally thought that I was familiar with the Select operation, but during the test in the morning, I found that I really didn’t know much.

After looking at some methods of jQuery, I sorted out some commonly used methods, which are listed below:

//Get the value of the first option
$('#test option:first').val();
//The value of the last option
$('#test option:last').val();
//Get the value of the second option
$('#test option:eq(1)').val();
//Get the selected value
$('#test').val();
$( '#test option:selected').val();
//Set the option with value 2 to the selected state
$('#test').attr('value','2');
//Set the first option to be selected
$('#test option:last').attr('selected','selected');
$("#test").attr(' value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($(' #test option').length - 1).val());
//Get the length of select
$('#test option').length;
//Add an option
$("#test").append("ff");
$("ff").appendTo("#test");
// Add and remove the selected item
$('#test option:selected').remove();
//Select the 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();

//Get the first one Group's label
$('#test optgroup:eq(0)').attr('label');
//Get the value of the first option under the second group
$('# test optgroup:eq(1) :option:eq(0)').val();

Get the value related to the text selected in select and value

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

Set the selected Text and Value

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

Add and delete option items

Append an Option (drop-down item) to select
$("#slc2").append("" i "");
Insert an option (first position) for select
$("#slc2").prepend("Please select ");
PS : prepend This is the best way to insert content inside all matching elements at the beginning.
Delete the option with the largest index value in the select (the last one)
$("#slc2 option:last").remove();
Delete the option with the index value 0 in the select (the first one)
$("#slc2 option[index='0']").remove();
Delete the option with value='3' in select
$("#slc2 option[value='3' ]").remove();
Delete the option with text='4' in select
$("#slc2 option[text='3']").remove();

Some related supplementary information:
Jquery Select operation is simple and convenient with a js plug-in
JQuery select tag operation code segment