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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
js 解决“options为空或不是对象”
Dec 22 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
jQuery之排序组件的深入解析
2013/06/19 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python 等差数列末项计算方式
2020/05/03 Python
python定义类的简单用法
2020/07/24 Python
Django实现随机图形验证码的示例
2020/10/15 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
PHP面试题及答案一
2012/06/18 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
信息技术培训感言
2014/03/06 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
借款协议书
2014/09/16 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang