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 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php5与php7的区别点总结
2019/10/11 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Flask之flask-script模块使用
2018/07/26 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
简单说说tomcat的配置
2013/05/28 面试题
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
自我推荐信怎么写
2015/03/24 职场文书
新学期开学标语2015
2015/07/16 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang