jQuery Select drop down box operation summary of recommendation

  • 2021-07-04 18:01:19
  • OfStack

jQuery gets the Select element and selects Text and Value:

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 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 largest index value of Select

jQuery gets the Select element and sets Text and Value:

Case analysis:

1. $("# select_id"). get (0). selectedIndex=1; //Set the entry with Select index value of 1 to be selected
2. $("# select_id"). val (4); //Set the Value value of Select to 4 to select
3. $("# select_id option [text= 'jQuery']"). attr ("selected", true); //Set the Text value of Select to jQuery check

jQuery Add/Remove Option entries for Select elements:

Case analysis:

1. $("#select_id").append(" < option value='Value' > Text < /option > "); //Add 1 Option to Select (drop-down item)
2. $("#select_id").prepend(" < option value='0' > Please select < /option > "); //Insert 1 Option for Select (1st position)
3. $("# select_id option: last"). remove (); //Delete Option with maximum index value in Select (last 1)
4. $("# select_id option [index= '0']"). remove (); //Delete Option with index value 0 in Select (1st)
5. $("# select_id option [value= '3']"). remove (); //Delete Option where Value= '3' in Select
6. $("# select_id option [text= '4']"). remove (); //Delete Option where Text= '4' in Select

Level 3 classification


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

Level 4 classification:


<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
 Please select 4 Class classification  
</option> 
</select> 
</div> 
.if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 
} 
if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}// This means: If we want to choose the first 3 Class: If the 4 If there is data in the class, delete it. If there is no data, 4 Class is the default value. I studied in the back AJAX Technology is often used after! 

Get Select:

Get select Selected text:

$("#ddlRegType").find("option:selected").text();

Get select the selected value:

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

Gets the selected index of select:

$("#ddlRegType ").get(0).selectedIndex;

Setting select:

Set the selected index of select:

$("# ddlRegType"). get (0). selectedIndex = index; //index is the index value

Set select selected value:

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

Set select Selected text:


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 select option entries:


$("#select_id").append("<option value='Value'>Text</option>"); // Add 1 Items option
$("#select_id").prepend("<option value='0'> Please select </option>"); // Insert in front 1 Items option
$("#select_id option:last").remove(); // Delete the with the largest index value Option
$("#select_id option[index='0']").remove();// Drop the index value to 0 Adj. Option
$("#select_id option[value='3']").remove(); // The delete value is 3 Adj. Option
$("#select_id option[text='4']").remove(); // Delete TEXT Value is 4 Adj. Option

Empty Select:

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

jquery Get the value:

.val()
.text()

Setting value

. val ('Set value here')


$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');// All selection  
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");// Cancel all selection  
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');// Select all odd numbers  
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){// Reverse 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()+"\r\n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
})

Related articles: