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 25 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
php基于redis处理session的方法
Mar 14 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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代码的53条建议
2008/03/27 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
JavaScript的console命令使用实例
2019/12/03 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python退出循环的方法
2020/06/18 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
公务员转正考察材料
2014/02/07 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
效能监察建议书
2014/05/19 职场文书
爱护花草树木的标语
2014/06/11 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技