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获取DOM元素的11种方法总结
Apr 25 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
输入自动提示搜索提示功能的使用说明: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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
投标承诺函格式
2015/01/21 职场文书
入党积极分子个人总结
2015/03/02 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫