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 的继承
Oct 01 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 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
php日期操作技巧小结
2016/06/25 PHP
php图片添加水印例子
2016/07/20 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
关于php开启错误提示的总结
2019/09/24 PHP
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python translator使用实例
2008/09/06 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python多进程fork()函数详解
2019/02/22 Python
Python:slice与indices的用法
2019/11/25 Python
python 如何设置守护进程
2020/10/29 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
MIS软件工程师的面试题
2016/04/22 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
生日邀请函范文
2014/01/13 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
计划生育证明书写要求
2014/09/17 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android