jQuery获取Select选择的Text和Value(详细汇总)


Posted in Javascript onJanuary 25, 2013

语法解释:

1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 
3. var checkValue=$("#select_id").val(); //获取Select选择的Value 
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的 Text和Value:
语法解释:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 
2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

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

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
获 取一组radio被选中项的值
var item = $('input[name=items][checked]').val();
获 取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[type=radio][checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组 radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
----------------------------------------------------------------------------------------------------
//遍历option和添加、移除option 
function changeShipMethod(shipping){ 
var len = $("select[name=ISHIPTYPE] option").length 
if(shipping.value != "CA"){ 
$("select[name=ISHIPTYPE] option").each(function(){ 
if($(this).val() == 111){ 
$(this).remove(); 
} 
}); 
}else{ 
$("<option value='111'>UPS Ground</option>").appendTo($("select[name=ISHIPTYPE]")); 
} 
}

//取得下拉??蔚倪x取值

$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
记 性不好的可以收藏下:
1,下拉框:

var cc1 = $(".formc select[name='country'] option[selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 
var cc2 = $('.formc select[name="country"]').val(); //得到下拉菜单的选中项的值 
var cc3 = $('.formc select[name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 
$("#select").empty();//清空下拉框 //$("#select").html(''); 
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[name='country'] option[selected] 表示具有name 属性,
并 且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;

2,单选框:

$("input[@type=radio][@checked]").val(); //得到单选框的 选中项的值(注意中间没有空格) 
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("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){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.
<script src="jquery-1.2.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#selectTest").change(function() 
{ 
//alert("Hello"); 
//alert($("#selectTest").attr("name")); 
//$("a").attr("href","xx.html"); 
//window.location.href="xx.html"; 
//alert($("#selectTest").val()); 
alert($("#selectTest option[@selected]").text()); 
$("#selectTest").attr("value", "2"); }); 
}); 
</script>

<a href="#">aaass</a>

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中 项的值
var item = $('input[@name=items][@checked]').val();
获取select被选 中项的文本
var item = $("select[@name=items] option[@selected]").text();
select 下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个 元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本 框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控 制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');// 填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);// 打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<optionvalue='1'& gt;1111</option><optionvalue='2'>2222</option& gt;").appendTo("#sel")//添加下拉框的option
$("#sel").empty();// 清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当 前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控 制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');// 填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);// 打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();// 清空下拉框

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
VUE实现密码验证与提示功能
Oct 18 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 #Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 #Javascript
ajax处理php返回json数据的实例代码
Jan 24 #Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 #Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 #Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
Python探索之pLSA实现代码
2017/10/25 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
C语言笔试集
2012/07/24 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
毕业生就业自荐书
2013/12/15 职场文书
颁奖晚会主持词
2014/03/25 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
党员查摆剖析材料
2014/10/10 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
python爬取某网站原图作为壁纸
2021/06/02 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers