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 相关文章推荐
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP中each与list用法分析
2016/01/08 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
简单了解Django模板的使用
2017/12/20 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python中time.ctime()实例用法
2021/02/03 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
大一自我鉴定范文
2013/10/04 职场文书
给女朋友的道歉信
2014/01/10 职场文书
白岩松演讲
2014/05/21 职场文书
客户答谢会活动方案
2014/08/31 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers