Home > Web Front-end > JS Tutorial > jquery gets the value of option and operates on option_jquery

jquery gets the value of option and operates on option_jquery

WBOY
Release: 2016-05-16 17:09:20
Original
972 people have browsed it

jQuery gets the Select element, and selects the Text and Value:

Copy the code The code is as follows:

$("#select_id").change(function(){//code...}); //Add an event for Select, which is triggered when one of the items is selected
var checkText=$("# select_id").find("option:selected").text(); //Get the Text selected by Select
var checkValue=$("#select_id").val(); //Get the Value selected by Select
var checkIndex=$("#select_id ").get(0).selectedIndex; //Get the index value selected by Select
var maxIndex=$("#select_id option:last").attr("index" ); //Get the maximum index value of Select

jQuery gets the Select element and sets the Text and Value:

Instance analysis:
Copy code The code is as follows:

$("#select_id ").get(0).selectedIndex=1; //Set the Select index The item with a value of 1 is selected
$("#select_id ").val(4); // Set the Select value to 4 and the item is selected
$("#select_id option[text='jQuery'] ").attr("selected", true); //Set the Text value of Select to the jQuery item selected

jQuery adds/removes the Option item of the Select element:

Example Analysis:
Copy code The code is as follows:

$("#select_id").append( ""); //Append an Option (drop-down item) to Select
$("#select_id").prepend(""); //Insert an Option (first position) for Select
$("#select_id option:last").remove(); //Remove from Select Option with the largest index value (the last one)
$("#select_id option[index='0']").remove(); //Delete the Option with the index value 0 in Select (the first one)
$("#select_id option[value='3']").remove(); //Delete the Option with Value='3' in Select
$("#select_id option[text='4']") .remove(); //Delete the Option with Text='4' in Select

Three-level classification

Fourth level classification:


if($("#thirdLevel").val()!=0){
$("#thirdLevel option[value!=0]").remove();
}
if($("#fourthLevelId").val()!=0){
$("#fourthLevelId option[value!=0]").remove();
}//This means: If we want to select the third category: if there is data in the fourth category, delete it, if Products in the fourth category without data are default values. I will often use it after learning AJAX technology later!

Get Select:
Get select selected text:
$("#ddlRegType").find("option:selected").text();
Get select Selected value:

$("#ddlRegType ").val();

Get selected index:
$("#ddlRegType ").get(0). selectedIndex;
Set select:
Set select Selected index:
$("#ddlRegType ").get(0).selectedIndex=index;//index is the index value

set select selected value:
Copy code The code is as follows:

$("#ddlRegType ") .attr("value","Normal");
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;

Set select selected text:
Copy code The code is as follows:

var count=$("#ddlRegType option").length;
for(var i=0;i{ if($("#ddlRegType ").get(0 ).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;
break;
}
}

$("#select_id option[text='jQuery']").attr("selected", true);

Set the select option item:
Copy code The code is as follows:

$("#select_id").append(""); //Add an option
$("#select_id" ).prepend(""); //Insert an option in front
$("#select_id option:last").remove() ; //Delete the Option with the largest index value
$("#select_id option[index='0']").remove(); //Delete the Option with the index value 0
$("#select_id option [value='3']").remove(); //Delete the Option with value 3
$("#select_id option[text='4']").remove(); //Delete the TEXT value Clear Select for Option 4

:

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

jquery gets the value:

val()
text()

Set value
val('Set value here')
Copy code The code is as follows:

$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//Select all
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//Cancel all selections
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//Select all odd numbers
})
$("#btn4"). click(function(){
$("[name='checkbox']").each(function(){//Inverse selection
if($(this).attr("checked")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
} )
})
$("#btn5").click(function(){//Output the selected value
var str="";
$("[name='checkbox' ][checked]").each(function(){
str =$(this).val() "rn";
//alert($(this).val());
})
alert(str);
})
})

Related labels:
source:php.cn
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template