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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
基于jquery实现五星好评
Nov 18 jQuery
vue-router的HTML5 History 模式设置
Sep 08 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python的print用法示例
2014/02/11 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
档案接收函范文
2014/01/10 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
老干部工作汇报材料
2014/10/28 职场文书
单位实习鉴定评语
2015/01/04 职场文书
师德承诺书
2015/01/20 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
防溺水主题班会教案
2015/08/12 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
OpenFeign实现远程调用
2022/08/14 Java/Android