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);
})
})