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复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
jQuery插件之validation插件
Mar 29 jQuery
微信小程序 实现点击添加移除class
Jun 12 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
用Golang运行JavaScript的实现示例
Nov 25 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
天津市收音机工业发展史
2021/03/04 无线电
global.php
2006/12/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python实现百度关键词排名查询
2014/03/30 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
合作经营协议书范本
2014/04/17 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
单位委托书
2014/10/15 职场文书
孙振耀退休感言
2015/08/01 职场文书
初二物理教学反思
2016/02/19 职场文书
django上传文件的三种方式
2021/04/29 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技