Jquery gets the value of option and operates on option

  • 2020-03-30 00:51:41
  • OfStack

JQuery gets the Select element and selects the Text and Value:

 
$("#select_id").change(function(){//code...}); // for Select Adds an event that fires when one of the items is selected  
var checkText=$("#select_id").find("option:selected").text(); //Gets the Text of the Select selection
var checkValue=$("#select_id").val(); //Gets the Value of the Select
var checkIndex=$("#select_id ").get(0).selectedIndex; //Gets the index value of the Select selection
var maxIndex=$("#select_id option:last").attr("index"); //Gets the largest index value of the Select

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

Case analysis:
 
$("#select_id ").get(0).selectedIndex=1; //Set the selection of an item with a Select index value of 1
$("#select_id ").val(4); //Set the selection of an item with a Value of 4 in the Select
$("#select_id option[text='jQuery']").attr("selected", true); //Set the Text value of Select to be selected by jQuery

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

Case analysis:
 
$("#select_id").append("<option value='Value'>Text</option>"); //Append an Option to the Select
$("#select_id").prepend("<option value='0'> Please select a </option>"); //Insert an Option(first position) for the Select
$("#select_id option:last").remove(); //Delete the largest Option with the index value in the Select (the last one)
$("#select_id option[index='0']").remove(); //Delete Option with index value of 0 in Select (first)
$("#select_id option[value='3']").remove(); //Delete the Option with Value='3' in Select
$("#select_id option[text='4']").remove(); //Delete the Option that Text='4' in Select

 Level 3 classification  <select name="thirdLevel" id="thirdLevel" 
onchange="getFourthLevel()"> 
<option value="0" id="thirdOption"> 
 Please select level 3  
</option> 
</select> 
</div> 

 Level 4 categories : 
<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
 Please select level 4 classification  
</option> 
</select> 
</div> 
if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 
} 
if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}//If we want to select the third category, delete if there is data in the fourth category, and default if there is no data in the fourth category. This is often used after learning AJAX techniques later!

For the Select:
Get the text selected by select:
$(" # ddlRegType "). The find (" option: selected "). The text ();
Get the value selected by the select:

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

Gets the index selected by select:
$(" # ddlRegType "). The get (0). SelectedIndex;
Set up the select:
Set the index selected by select:
$(" # ddlRegType "). The get (0). SelectedIndex = index; //index is the index value

Set the selected value of select:
 
$("#ddlRegType ").attr("value","Normal " ); 
$("#ddlRegType ").val("Normal"); 
$("#ddlRegType ").get(0).value = value; 

Set the text selected by select:
 
var count=$("#ddlRegType option").length; 
for(var i=0;i<count;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:
 
$("#select_id").append("<option value='Value'>Text</option>"); //Add an option
$("#select_id").prepend("<option value='0'> Please select a </option>"); //Insert an option in front
$("#select_id option:last").remove(); //Drop the Option with the largest index value
$("#select_id option[index='0']").remove();//Deletes the Option with an index value of 0
$("#select_id option[value='3']").remove(); //Delete the Option with a value of 3
$("#select_id option[text='4']").remove(); //Delete the Option with a TEXT value of 4

To empty the Select:

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

Jquery gets value:

Val ()
The text ()

Set the value
Val (' set value here ')
 
$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');// Future generations  
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//To cancel all
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//Select all odd Numbers
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){// The selected  
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 articles: