jquery获得option的值和对option进行操作


Posted in Javascript onDecember 13, 2013

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 三级分类 <select name="thirdLevel" id="thirdLevel" 
onchange="getFourthLevel()"> 
<option value="0" id="thirdOption"> 
请选择三级分类 
</option> 
</select> 
</div> 
四级分类: 
<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
请选择四级分类 
</option> 
</select> 
</div> 
if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 
} 
if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!

获取Select :
获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();
获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:
$("#ddlRegType ").get(0).selectedIndex;
设置select:
设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value:

$("#ddlRegType ").attr("value","Normal“); 
$("#ddlRegType ").val("Normal"); 
$("#ddlRegType ").get(0).value = value;

设置select 选中的text:
var count=$("#ddlRegType option").length; 
for(var i=0;i<count;i++) 
{ if($("#ddlRegType ").get(0).options[i].text == text) 
{ 
$("#ddlRegType ").get(0).options[i].selected = true; 
break; 
} 
} $("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:
$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option 
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option 
$("#select_id option:last").remove(); //删除索引值最大的Option 
$("#select_id option[index='0']").remove();//删除索引值为0的Option 
$("#select_id option[value='3']").remove(); //删除值为3的Option 
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:

$("#ddlRegType ").empty();

jquery获得值:

val()
text()

设置值
val('在这里设置值')

$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){//反选 
if($(this).attr("checked")){ 
$(this).removeAttr("checked"); 
} 
else{ 
$(this).attr("checked",'true'); 
} 
}) 
}) 
$("#btn5").click(function(){//输出选中的值 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"\r\n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
})

Javascript 相关文章推荐
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
js实现图片懒加载效果
Jul 17 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
Extjs4中的分页应用结合前后台
Dec 13 #Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 #Javascript
window.print打印指定div实例代码
Dec 13 #Javascript
Javascript中call的两种用法实例
Dec 13 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
女大学生自我鉴定
2013/12/09 职场文书
校园达人秀策划书
2014/01/12 职场文书
文明教师事迹材料
2014/01/16 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书