Home > Web Front-end > JS Tutorial > Summary of the basic operations of JQuery on form elements_jquery

Summary of the basic operations of JQuery on form elements_jquery

WBOY
Release: 2016-05-16 16:41:48
Original
1336 people have browsed it

JQuery implementation of 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(); 
} 
}); 
});
Copy after login

HTML:

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

//1.jQuery对select的基本操作 
$("#select_id").change(function(){ //code...}); //为Select添加事件,当选择其中一项时触发 

var checkValue=$("#select_id").val(); //获取Select选择的Value 
var checkValue = $('.formc select[@name="country"]').val(); //得到下拉菜单name=country的选中项的值 
var checkValue=$("#select_id").val().join(","); //获取select多选(multiple="true"时候) 的value 

var checkText = $("#select_id").find("option:selected").text(); //获取Select选择的Text 
var checkText = $("select[@name=country] option[@selected]").text(); //获取select被选中项的文本(注意中间有空格) 
var checkText = $("#select_id option:selected").text(); 

var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 

var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 

$("#select_id ").get(0).selectedIndex = 1; //设置Select索引值为1(第二项)的项选中 
$('#select_id')[0].selectedIndex = 1; //设置Select索引值为1(第二项)的项选中 
$("#select_id ").val(4); //设置Select的Value值为4的项选中 
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 
$("#select_id").attr("value",'-sel3'); //设置value=-sel3的项目为当前选中项 

$("#select_id").empty(); //清空下拉框 

$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#select_id")//添加下拉框的option 
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 

//2.jquery对radio的基本操作 
var item = $('input[@name=items][@checked]').val(); //获取一组radio被选中项的值 
var rval = $("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格) 
$('input[@name=items]').get(1).checked = true; //radio单选组的第二个元素为当前选中值 
$("input[@type=radio]").attr("checked",'2'); //设置value=2的项目为当前选中项 
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格) 

//3.jquery对checkbox的基本操作 
$("#checkbox_id").attr("value"); //多选框checkbox 
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值 
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出 
alert($(this).val()); 
}); 
$("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 

//4.jquery对text的基本操作 
$("#txt").attr("value"); //文本框,文本区域: 
$("#txt").attr("value",''); //清空内容 
$("#txt").attr("value",'11');//填充内容
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template