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框架myJSFrame附API使用帮助
Jun 28 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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设计模式中的工厂模式
2008/06/12 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
对python requests发送json格式数据的实例详解
2018/12/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python列表解析操作实例总结
2020/02/26 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
总裁助理岗位职责
2014/02/17 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
人力资源部岗位职责
2015/02/11 职场文书
催款律师函范文
2015/05/27 职场文书
行为习惯主题班会
2015/08/14 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
vue 给数组添加新对象并赋值
2022/04/20 Vue.js