jQuery动态添加删除select项(实现代码)

 更新时间:2013年09月03日 08:46:22   作者:  
以下是对jQuery动态添加删除select项的实现代码进行了详细的分析介绍,需要的朋友可以过来参考下

复制代码 代码如下:

// 添加
function col_add() {
 var selObj = $("#mySelect");
 var value="value";
 var text="text";
 selObj.append("<option value='"+value+"'>"+text+"</option>");
}
// 删除
function col_delete() {
 var selOpt = $("#mySelect option:selected");
 selOpt.remove();
}
// 清空
function col_clear() {
 var selOpt = $("#mySelect option");
 selOpt.remove();
}

以上方法为jQuery动态添加、删除和清空select。下面是纯js的写法:
复制代码 代码如下:

var sid = document.getElementById("mySelect");
sid.options[sid.options.length]=new Option("text","value");   // 在select最后添加一项

其他常用的方法:
复制代码 代码如下:

$("#mySelect").change(function(){//code...});    //select选中项改变时触发

// 获取select值
var text=$("#mySelect").find("option:selected").text();   //获取Select选中项的Text
var value=$("#mySelect").val();   //获取Select选中项的Value
var value=$("#mySelect&nbsp;option:selected").attr("value"); &nbsp; //获取Select选中项的Value
var index=$("#mySelect").get(0).selectedIndex;   //获取Select选中项的索引值,从0开始
var index=$("#mySelect option:selected").attr("index"); &nbsp; //不可用!!!
var index=$("#mySelect option:selected").index(); &nbsp; //获取Select选中项的索引值,从0开始
var maxIndex=$("#mySelect option:last").attr("index");   //不可用!!!
var maxIndex=$("#mySelect option:last").index();//获取Select最大索引值,从0开始
$("#mySelect").prepend("<option value='value'>text</option>"); &nbsp; //Select第一项前插入一项

// 设置select值
//根据索引设置选中项
$("#mySelect").get(0).selectedIndex=index;//index为索引值&nbsp;
//根据value设置选中项
$("#mySelect").attr("value","newValue");&nbsp;
$("#mySelect").val("newValue");&nbsp;
$("#mySelect").get(0).value = value;&nbsp;
//根据text设置对应的项为选中项
var count=$("#mySelect option").length;&nbsp;
for(var i=0;i<count;i++)&nbsp;
{
    if($("#mySelect").get(0).options[i].text == text)&nbsp;
    {&nbsp;
        $("#mySelect").get(0).options[i].selected = true;&nbsp;
        break;&nbsp;
    }&nbsp;
}&nbsp;

// 清空select
$("#mySelect").empty();

相关文章

  • easyui导出excel无法弹出下载框的快速解决方法

    easyui导出excel无法弹出下载框的快速解决方法

    下面小编就为大家带来一篇easyui导出excel无法弹出下载框的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    jquery版,简单易用的jQuery 版仿新浪微博 向下滚动效果,现在越来越发现jquery太强大咯,哈哈。
    2011-02-02
  • JQuery Mobile实现导航栏和页脚

    JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部。本文给大家介绍JQuery Mobile实现导航栏和页脚的相关知识,需要的朋友参考下吧
    2016-03-03
  • 基于jQuery的ajax功能实现web service的json转化

    基于jQuery的ajax功能实现web service的json转化

    前面文章说过下次会给大家介绍详细的基于web Services的JqueryAjax调用如何把一个datatable得数据转化成JSON数据,然后在客户端再通过json2.js转化成javascript对象。
    2009-08-08
  • Jquery Ajax的Get方式时需要注意URL地方

    Jquery Ajax的Get方式时需要注意URL地方

    我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
    2011-04-04
  • jQuery实现广告显示和隐藏动画

    jQuery实现广告显示和隐藏动画

    这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JQuery中的$.getJSON 使用说明

    JQuery中的$.getJSON 使用说明

    jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。
    2011-03-03
  • jquery中cookie用法实例详解(获取,存储,删除等)

    jquery中cookie用法实例详解(获取,存储,删除等)

    这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以参考下
    2016-01-01
  • jQuery 在图片和文字中插入内容实例

    jQuery 在图片和文字中插入内容实例

    jQuery是一种流行的JavaScript库,可以轻松地在网页中插入图片和文字。通过使用jQuery的插入功能,您可以在网页上动态地添加内容,从而提高用户体验。本文将介绍如何使用jQuery在图片和文字中插入内容,并提供一些实用的代码示例。
    2023-06-06
  • 基于jQuery的仿flash的广告轮播

    基于jQuery的仿flash的广告轮播

    很多网站的首页都有广告轮播,今天闲来看了一网站的首页广告轮播方式,是通过 jQuery的blockSlide插件实现的,然后自己测试了一下,很好。
    2010-11-11

最新评论