JQuery对表单元素的基本操作使用总结


Posted in Javascript onJuly 18, 2014

select下拉列表onChange事件之JQuery实现:

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.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');//填充内容
Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
Javascript倒计时代码
Aug 12 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
You might like
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php解决安全问题的方法实例
2019/09/19 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
js控制input输入字符解析
2013/12/27 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python+opencv识别图片中的圆形
2020/03/25 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python多分支if语句的使用
2020/09/03 Python
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
制定岗位职责的原则
2013/11/08 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
债务纠纷代理词
2015/05/25 职场文书
新党员入党决心书
2015/09/22 职场文书
2016年母亲节寄语
2015/12/04 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
基于Go Int转string几种方式性能测试
2021/04/28 Golang
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏