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


Posted in Javascript onSeptember 03, 2013
// 添加
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 option:selected").attr("value");   //获取Select选中项的Value
var index=$("#mySelect").get(0).selectedIndex;   //获取Select选中项的索引值,从0开始
var index=$("#mySelect option:selected").attr("index");   //不可用!!!
var index=$("#mySelect option:selected").index();   //获取Select选中项的索引值,从0开始
var maxIndex=$("#mySelect option:last").attr("index");   //不可用!!!
var maxIndex=$("#mySelect option:last").index();//获取Select最大索引值,从0开始
$("#mySelect").prepend("<option value='value'>text</option>");   //Select第一项前插入一项
// 设置select值
//根据索引设置选中项
$("#mySelect").get(0).selectedIndex=index;//index为索引值 
//根据value设置选中项
$("#mySelect").attr("value","newValue"); 
$("#mySelect").val("newValue"); 
$("#mySelect").get(0).value = value; 
//根据text设置对应的项为选中项
var count=$("#mySelect option").length; 
for(var i=0;i<count;i++) 
{ 
    if($("#mySelect").get(0).options[i].text == text) 
    { 
        $("#mySelect").get(0).options[i].selected = true; 
        break; 
    } 
} 
// 清空select
$("#mySelect").empty();
Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 #Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 #Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 #Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 #Javascript
js的alert弹出框出现乱码解决方案
Sep 02 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
js制作提示框插件
2020/12/24 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
初一地理教学反思
2014/01/16 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
节约用水倡议书
2014/04/16 职场文书
化学工程专业求职信
2014/08/10 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
工作证明格式范文
2015/06/15 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫