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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js 求时间差的实现代码
Apr 26 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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之COOKIE支持详解
2010/09/20 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php集成开发环境详解
2019/09/24 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
javascript history对象详解
2017/02/09 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python实现购物车购物小程序
2018/04/18 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
pytorch中的inference使用实例
2020/02/20 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python读写压缩文件的方法
2020/07/30 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
网络安全方面的面试题
2016/01/07 面试题
先进党支部事迹材料
2014/01/13 职场文书
英语国培研修感言
2014/02/13 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python