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