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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
element form 校验数组每一项实例代码
Oct 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
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python web基础之加载静态文件实例
2018/03/20 Python
Python Series从0开始索引的方法
2018/11/06 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
如何理解Python中的变量
2020/06/01 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
美容师的职业规划书
2013/12/27 职场文书
课程改革实施方案
2014/03/16 职场文书
个人违纪检讨书
2014/09/15 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
小学生作文批改评语
2014/12/25 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle