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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
字符串反转_JavaScript
Apr 28 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
ztree实现权限横向显示功能
May 20 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
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的分页功能
2007/03/21 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python函数返回不定数量的值方法
2019/01/22 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
刑事辩护授权委托书
2014/09/13 职场文书
继承公证书格式
2015/01/26 职场文书
刑事辩护词范文
2015/05/21 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python socket如何解析HTTP请求内容
2022/02/12 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库