jQuery操作Select

jQuery是如何控制和操作select的。先看下面的html代码

<select id="test">
<option value="1">选项一<option>
<option value="2">选项一<option>
                          ...
<option value="n">选项N<option>
</select>

所谓jQuery操作“select”, 说的更确切一些是应该是jQuery控制 “option”, 看下面的jQuery代码:

//获取第一个option的值
$('#test option:first').val();

//最后一个option的值
$('#test option:last').val();

//获取第二个option的值
$('#test option:eq(1)').val();

//获取选中的值
$('#test').val();
$('#test option:selected').val();

//设置值为2的option为选中状态
$('#test').attr('value','2');

//设置最后一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

//获取select的长度
$('#test option').length;

//添加一个option
$("#test").append("<option value='n+1'>第N+1项</option>");
$("<option value='n+1'>第N+1项</option>").appendTo("#test");

//添除选中项
$('#test option:selected').remove();

//删除项选中(这里删除第一项)
$('#test option:first').remove();、

//指定值被删除
$('#test option').each(function(){
    if( $(this).val() == '5'){
         $(this).remove();
     }
});
$('#test option[value=5]').remove();

//获取第一个Group的标签
$('#test optgroup:eq(0)').attr('label');

//获取第二group下面第一个option的值
$('#test optgroup:eq(1) : option:eq(0)').val();

http://www.smartwei.com/jquery-control-select.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

在 Python 程序中显示进度条

转自 http://my.oschina.net/jhao104/blog/681507 1、利用标准输出 先说一下文本系统的控制符: \r: 将光标移...

3287
来自专栏蛋未明的专栏

JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

4116
来自专栏Android干货

小程序实践(四):动态控制组件的显示/隐藏

组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的。

1162
来自专栏疯狂的小程序

分享:微信小程序中的分享事件

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

5559
来自专栏九彩拼盘的叨叨叨

浏览器默认样式

浏览器都拥有一套自己的默认样式。 浏览器之所以有默认样式表,是为了没有样式表的页面也能凑活着看。 不同浏览器;以及版本不同的浏览器的默认样式一般都是不同的。

802
来自专栏liuchengxu

使用 Vim 的 jump list 看代码

Vim 可以记录我们最近访问的位置(location)。每个位置(position)(position 包括了文件名,列号,行号)会被一个 jump list ...

802
来自专栏IT开发技术与工作效率

Excel Post下载网址获取方法

1932
来自专栏柠檬先生

vue2.0 组件通信

组件通信:     子组件要想拿到父组件数据 props     子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,     对...

22610
来自专栏smy

prompt() 方法,弹框带输入框

prompt()  有alert的风格,却带着输入框,这是怎么实现的呢? 语法 prompt(text,defaultText) 参数 描述 t...

4185
来自专栏飞雪无情的博客

Ubuntu下使用搜狗拼音输入法

对于经常使用Ubuntu操作系统并且不会使用五笔输入法的屌丝来说,选择一种好的拼音输入法能让你事半功倍。在window下我们都知道搜狗的输入法比较好用,更有一些...

1523

扫码关注云+社区

领取腾讯云代金券