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 分页全选或反选标识实现代码
Aug 09 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
浅谈node的事件机制
Oct 09 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue路由的配置和页面切换详解
Sep 09 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 define的第二个参数使用方法
2013/11/04 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
经典洗发水广告词
2014/03/13 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
党员个人对照检查材料
2014/10/01 职场文书
车辆委托书范本
2014/10/05 职场文书
mysql知识点整理
2021/04/05 MySQL
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
python数据处理之Pandas类型转换
2022/04/28 Python