JQuery USES a summary of the basic operations of form elements

  • 2020-03-30 03:34:11
  • OfStack

JQuery implementation of the select drop-down list onChange event:

JQuery:


$(document).ready(function () { 
$("#selectMenu").bind("change", function () { 
if ($(this).val() == "pro1") { 
$("#pro1").slideDown(); 
$("#pro2").slideUp(); 
} 
else if($(this).val() =="pro2") { 
$("#pro2").slideDown(); 
$("#pro1").slideUp(); 
} 
}); 
});

  HTML:


<select id="selectMenu"> 
<option value="" >Please select product below</option> 
<option value="pro1">Product 1</option> 
<option value="pro2">Product 2</option> 
</select>


//1. Basic operations of jQuery on select
$("#select_id").change(function(){ //code...}); // for Select Adds an event that fires when one of the items is selected  

var checkValue=$("#select_id").val(); //Gets the Value of the Select
var checkValue = $('.formc select[@name="country"]').val(); //Gets the value of the selected item in the drop-down menu name=country
var checkValue=$("#select_id").val().join(","); //Gets the value of select multiple="true"

var checkText = $("#select_id").find("option:selected").text(); //Gets the Text of the Select selection
var checkText = $("select[@name=country] option[@selected]").text(); //Gets the text of the selected item in select (note the space)
var checkText = $("#select_id option:selected").text(); 

var cc2 = $('.formc select[@name="country"]').val(); //Gets the value of the selected item in the drop-down menu
var cc3 = $('.formc select[@name="country"]').attr("id"); //Gets the ID attribute value for the selected item in the drop-down menu

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

$("#select_id ").get(0).selectedIndex = 1; //Set the selection of an item with a Select index value of 1(second item)
$('#select_id')[0].selectedIndex = 1; //Set the selection of an item with a Select index value of 1(second item)
$("#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
$("#select_id").attr("value",'-sel3'); //The item with value=-sel3 is the currently selected item

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

$("#select_id").append("<option value='Value'>Text</option>"); //Append an Option to the Select
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#select_id")//Add options to the drop-down box
$("#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

//2. Basic operations of jquery on radio
var item = $('input[@name=items][@checked]').val(); //Gets the values of a set of selected items of radio
var rval = $("input[@type=radio][@checked]").val(); //Gets the value of the selected item in the marquee (note no space)
$('input[@name=items]').get(1).checked = true; //The second element of the radio radio group is the currently selected value
$("input[@type=radio]").attr("checked",'2'); //The item with value=2 is the currently selected item
$("input[@type=radio][@value=2]").attr("checked",'checked'); //Set the value of the marquee =2 to the selected state.

//Jquery's basic checkbox operations
$("#checkbox_id").attr("value"); //Checkboxes checkbox
$("input[@type=checkbox][@checked]").val(); //Gets the value of the first item selected in the check box
$("input[@type=checkbox][@checked]").each(function(){ //Because more than one check box is typically selected, the output can be looped
alert($(this).val()); 
}); 
$("#chk1").attr("checked",'');//Don't tick
$("#chk2").attr("checked",true);// tick  
if($("#chk1").attr('checked')==undefined) //Determine if you have checked the box

//4. Basic jquery operations on text
$("#txt").attr("value"); //Text box, text area:
$("#txt").attr("value",''); //Empty content
$("#txt").attr("value",'11');// Fill the content 

Related articles: