How to operate select with jquery

Jquery operation select method: 1. Set the item with value to pxx to select, the code is [$(".selector").val("pxx")]; 2. Set the item with text to pxx to select , the code is [$(".selector").find("option[te].

The operating environment of this tutorial: windows7 system, jquery3.2.1 version , thinkpad t480 computer.

Related free learning recommendations: javascript learning tutorial, jQuery Tutorial

Jquery operation select method:

1. Set the item with value to pxx to select

$(".selector").val("pxx");

2. Select the item with text set to pxx

$(".selector").find("option[text='pxx']").attr("selected",true);

There is a usage of square brackets. The equal sign in the brackets is preceded by the attribute name without quotation marks. Many times, the square brackets Application can make the logic very simple.

3. Get the value of the currently selected item

$(".selector").val();

4. Get the text of the currently selected item

$(".selector").find("option:selected").text();

A colon is used here. Mastering its usage and drawing inferences about other cases will also make the code concise.

Many times the cascade of select is used, that is, the value of the second select changes with the value selected by the first select. This is in jquery is very simple.

For example:

$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中，这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});

jQuery gets the Text and Value selected by Select:

Syntax explanation:

1. $("#select_id").change(function(){//code...}); //Add an event for Select, which is triggered when one of the items is selected

2. var checkText=$("#select_id").find("option:selected").text(); //Get the Text selected by Select

3. var checkValue=$("#select_id").val(); //Get the Value selected by Select

4. var checkIndex=$("#select_id ").get (0).selectedIndex; //Get the index value selected by Select

5. var maxIndex=$("#select_id option:last").attr("index"); //Get the maximum index value of Select

jQuery sets the Text and Value selected by Select:

Syntax explanation:

1. $("#select_id ").get(0).selectedIndex=1; //Set the item with Select index value 1 to select

2. $("#select_id ").val(4); // Set the Select value to 4 to select the item

3. $("#select_id option[text='jQuery']").attr("selected", true) ; //Set the Text value of Select to the jQuery item selection

jQuery adds/delete the Option item of Select:

Syntax explanation:

1. $("#select_id").append("15ba1cdaec20352f688ebe8ab9039218Text4afa15d3069109ac30911f04c56f3338"); //Append an Option (drop-down item) to Select

2. $("#select_id").prepend("b93adbf83522c105f4709f0807fe84aePlease select4afa15d3069109ac30911f04c56f3338"); //Insert for Select An Option (the first position)

3. $("#select_id option:last").remove(); //Delete the Option with the largest index value in Select (the last one)

4. $("#select_id option[index='0']").remove(); //Delete the Option (first) with index value 0 in Select

5. $("#select_id option[value='3']").remove(); //Delete the Option with Value='3' in Select

5. $("#select_id option[text='4']").remove(); //Delete the Option with Text='4' in Select

jquery radio Value, checkbox value, select value, radio selected, checkbox selected, select selected, and related

Get the value of a group of radio selected items

var item = $('input[name=items][checked]').val();

Get the select selected item The text

var item = $("select[name=items] option[selected]").text();

The second element of the select drop-down box is the currently selected value

$('#select_id')[0].selectedIndex = 1;

The second element of the radio radio selection group is the currently selected value

$('input[name=items]').get(1).checked = true;

Get the value :

• Text box, text area: $("#txt").attr("value");

• Multiple selection box checkbox: $("#checkbox_id").attr("value");

• Radio selection group radio: $( "input[type=radio][checked]").val();

• Drop-down box select: $('#sel').val() ;

Control form elements:

Text box, text area: $("#txt").attr("value",''); //Clear the content

$("#txt").attr("value",'11');//Fill the content

Multiple selection box checkbox: $("#chk1" ).attr("checked",'');//Unchecked

$("#chk2").attr("checked",true);//Checked

if($("#chk1").attr('checked')==undefined) //Judge whether it has been checked

Radio group radio: $("input[type=radio]"). attr("checked",'2');//Set the item with value=2 as the currently selected item

Drop-down box select: $("#sel").attr("value",'-sel3');//Set the item with value=-sel3 as the currently selected item

$("< ;option value='1'>11114afa15d3069109ac30911f04c56f33382eae82d737bc394734fed6d77327bb5322224afa15d3069109ac30911f04c56f3338").appendTo("#sel")//Add the option of the drop-down box

$("#sel").empty(); //Clear the drop-down box

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to operate select with jquery. For more information, please follow other related articles on the PHP Chinese website!