jquery对单选框,多选框,文本框等常见操作小结


Posted in Javascript onJanuary 08, 2014

一、文本框、单选按钮、复选框、相关操作

var sex=$("input[name='sex']:checked").val();   //获取一组radio被选中项的值  
var item=$("#sel option:selected").text();      //获取select被选中项的文本  
var option_num=$('#sel').val();                 //获取select项目索引 
$("#sel")[0].selectedIndex =1;                  //select下拉框的第二个元素为当前选中值 
$("input[name='sex']").get(1).checked=true;     //radio单选组的第二个元素为当前选中值 
 或者对单选框默认选定设置: 
$("input[name='sex']").each(function(){ 
            if($(this).val()==s){ 
                $(this).attr("checked",true); 
                                //this.checked=true; 
            } 
        });

Jquery 根据value值设置下拉列表(select)默认选中项
  <select name=sel onchange="bao(this.options[this.options.selectedIndex].value)">
  <option value="">请选择
  <option value="1">Item 1
  <option value="2">Item 2
  <option value="3">Item 3
  </select>
  <script>
  function bao(s)
  {
     txt.value=s;
     //选择后,让第一项被选中,这样,就有Change啦.
     document.all.sel.options[0].selected=true;
 }
 </script>
 <textarea id=txt></textarea>

二、 jQuery获取 Select选择的Text和Value
语法解释:
 $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项 时触发
 var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
 var checkValue=$("#select_id").val();  //获取Select选择的Value
 var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
 var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 
jQuery设置Select选择的Text和Value:
语法解释:
 $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
 $("#select_id ").val(4);   //设置Select的Value值为4的项选中
 $("#select_id option[text='jQuery']").attr("selected", true);   //设置 Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项:
语法解释:
 $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个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

应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery common</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //初始化下拉列表--动态添加
        var item = ['幼儿园','小学','初中','高中','大学','研究生','博士','硕士'];
        var html ="<option value='0'>请选择</option>";
        for (var i = 0;i < item.length;i++){
            html += "<option value='"+(i+1)+"'>"+item[i]+"</option>";
        }
        $("#grade").empty().append(html);
        $("#grade option[value='0']").attr("selected","selected");//默认第一项被选中
    })
    //为Select添加事件,当选择其中一项时触发
    function showIt(){
        var selectText = $("#grade option:selected").text();//获取Select选择的Text
        //var selectText = $("#grade").find("option:selected").text();//这种方式也可行
        var selectValue = $("#grade").val();//获取被选择的value
        var selectIndex = $("#grade").get(0).selectedIndex//获取select的索引值
        var text = '选择:'+selectText+"\n";
        text +='value值:'+selectValue+"\n";
        text +='索引值:'+selectIndex;
        $("#text").text(text);
    }
</script>
</head>
<body>
    <div>
        <select name='grade' id='grade' onchange="showIt()"></select>
        <p><textarea name='text' id='text' row='30' col='100'></textarea></p>
    </div>
</body>
</html>
Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 #Javascript
js获取当前页面路径示例讲解
Jan 08 #Javascript
js获取当前路径的简单示例代码
Jan 08 #Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 #Javascript
jquery 图片缩放拖动的简单实例
Jan 08 #Javascript
document.execCommand()的用法小结
Jan 08 #Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 #Javascript
You might like
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
在Python中使用元类的教程
2015/04/28 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python自动下载图片的方法示例
2020/03/25 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
super()与this()的区别
2016/01/17 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
表彰会主持词
2014/03/26 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
php 原生分页
2021/04/01 PHP
java多态注意项小结
2021/10/16 Java/Android