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 typeof 用法
Dec 28 Javascript
JS 对象介绍
Jan 20 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
js word表格动态添加代码
2010/06/07 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python实现简单购物商城
2016/05/21 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python如何读写二进制数组数据
2020/08/01 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
新电JAVA笔试题目
2014/08/31 面试题
《凡卡》教学反思
2014/04/09 职场文书
法制宣传月活动方案
2014/05/11 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
高中历史教学反思
2016/02/19 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python