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 相关文章推荐
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
es6函数之rest参数用法实例分析
Apr 18 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创建图像具体步骤
2017/03/13 PHP
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
关于赌博的检讨书
2014/01/24 职场文书
大学毕业感言200字
2014/03/09 职场文书
模具专业自荐信
2014/05/29 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
三方协议书
2015/01/27 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
详解Python中下划线的5种含义
2021/07/15 Python