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 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
js日期联动示例
May 02 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
javascript文本模板用法实例
Jul 31 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
vue文件树组件使用详解
Mar 29 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
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 Hex RGB颜色值互换的使用
2013/05/10 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
阿德的梦教学反思
2014/02/06 职场文书
3分钟演讲稿
2014/04/30 职场文书
悬空寺导游词
2015/02/05 职场文书
预备党员考察意见范文
2015/06/01 职场文书
男生贾里读书笔记
2015/06/30 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Golang并发操作中常见的读写锁详析
2021/08/30 Golang