JQuery 操作select标签实现代码

 更新时间:2010年05月14日 11:17:03   作者:  
我们经常遇到要操作DOM元素,例如<select>,在Asp.net中Dropdownlist原型就是select。
下面几个常用的代码或许对您有帮助:
复制代码 代码如下:

//1.获取选中option值
$('#selectList').val();
//2.获取选中option的文本
$('#selectList :selected').text();
//3.获取多个选中option值、文本
var foo = [];
$('#multiple :selected').each(function(i, selected) {
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();
//4.使用选项option的条件表达式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.删除某个value=2的option
$("#selectList option[value='2']").remove();
//6.从list A 移动option到 list B.
// here we have 2 select lists and 2 buttons. If you click the “add” button,
// we remove the selected option from select1 and add that same option to select2.
// The “remove” button just does things the opposite way around.
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});

如果您不了解JQuery,可以先看它的文档

希望这篇POST对您有帮助。

相关文章

  • jQuery轮播图功能实现方法

    jQuery轮播图功能实现方法

    这篇文章主要为大家详细介绍了jQuery轮播图功能实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 浅析JQuery获取和设置Select选项的常用方法总结

    浅析JQuery获取和设置Select选项的常用方法总结

    本篇文章是对JQuery获取和设置Select选项的一些常用方法进行了汇总介绍,有需要的朋友可以参考一下
    2013-07-07
  • jquery控制页面的展开和隐藏实现方法(推荐)

    jquery控制页面的展开和隐藏实现方法(推荐)

    下面小编就为大家带来一篇jquery控制页面的展开和隐藏实现方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery 动态遍历select 赋值的实例

    jquery 动态遍历select 赋值的实例

    今天小编就为大家分享一篇jquery 动态遍历select 赋值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 3分钟写出来的Jquery版checkbox全选反选功能

    3分钟写出来的Jquery版checkbox全选反选功能

    checkbox全选反选的文章在以前也有介绍很多,实在是不想在提起了,然而身边还是有些朋友不会,于是3分钟写出来一个估计有很多bug
    2013-10-10
  • jQuery对象和DOM对象相互转化

    jQuery对象和DOM对象相互转化

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
    2009-04-04
  • jQuery实现带右侧索引功能的通讯录示例【附源码下载】

    jQuery实现带右侧索引功能的通讯录示例【附源码下载】

    这篇文章主要介绍了jQuery实现带右侧索引功能的通讯录,结合实例形式分析了jQuery针对页面元素动态遍历、排序等相关操作技巧,并附源码供读者下载参考,需要的朋友可以参考下
    2018-04-04
  • jQuery实现的自定义滚动条实例详解

    jQuery实现的自定义滚动条实例详解

    这篇文章主要介绍了jQuery实现的自定义滚动条,结合完整实例详细分析了jQuery自定义滚动条的实现步骤与相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,需要的朋友可以参考下
    2016-09-09
  • jQuery使用jsonp实现百度搜索的示例代码

    jQuery使用jsonp实现百度搜索的示例代码

    这篇文章主要介绍了jQuery使用jsonp实现百度搜索,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • jquery验证邮箱格式并显示提交按钮

    jquery验证邮箱格式并显示提交按钮

    这篇文章主要介绍了jquery验证邮箱格式并显示提交按钮,只有输入email地址正确才显示提交按钮演示,感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论