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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jsPDF导出pdf示例
May 02 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
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 xml实例 留言本
2009/03/20 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python连接数据库的方法
2017/10/19 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
详解python tkinter 图片插入问题
2020/09/03 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
升职自荐信
2013/11/28 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
婚前协议书范本
2014/10/27 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
对讲机的最大通讯距离是多少
2022/02/18 无线电
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
基于Python实现股票收益率分析
2022/04/02 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android