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 相关文章推荐
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jQuery聚合函数实例
May 21 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
自己前几天写的无限分类类
2007/02/14 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
经验几则 推荐
2006/09/05 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python subprocess库的使用详解
2018/10/26 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
小学语文教学反思
2014/02/10 职场文书
小学生暑假家长评语
2014/04/17 职场文书
十佳党员事迹材料
2014/08/28 职场文书