jquery操作select大全


Posted in Javascript onApril 25, 2014

添加option

$('#id').append("<option value="value">Text</option>");//为select追加一个option
$('#id').prepend("<option value='0'>Text</option>");   //为select插入一个option

移除option

$("#ID option").each(function(){
if($(this).val()==111){
$(this).remove();
}
});$("<option value='111'>UPS Ground</option>").appendTo($("#ID"));
取得下拉选单的选取值
$("#testSelect option:selected").text();
$("#testSelect").find('option:selected').text();
$("#testSelect").val();
根据option的值选中下拉框
$('#testSelect').val('111');

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($("#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被选中 项的值

varitem= $('input[@name=items][@checked]').val();

获取select被选中项的文本

varitem= $("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'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();// 清空下拉框

获取一组radio被选中项的值

varitem= $('input[@name=items][@checked]').val();

获取select被选中项的文本

varitem= $("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 学习笔记(八)javascript对象
Apr 12 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
jquery自定义下拉列表示例
Apr 25 #Javascript
jquery常用特效方法使用示例
Apr 25 #Javascript
javascript实现存储hmtl字符串示例
Apr 25 #Javascript
javascript作用域和闭包使用详解
Apr 25 #Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 #Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
js动态移动滚动条至底部示例代码
Apr 24 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
PHP新手上路(六)
2006/10/09 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
机器学习python实战之决策树
2017/11/01 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
利用python生成照片墙的示例代码
2020/04/09 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
如何保障Web服务器安全
2014/05/05 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书