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代码)
Oct 29 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
JS匿名函数实例分析
Nov 26 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 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&amp;mysql(四)
2006/10/09 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
laravel请求参数校验方法
2019/10/10 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
tornado框架blog模块分析与使用
2013/11/21 Python
python动态性强类型用法实例
2015/05/09 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
用python计算文件的MD5值
2020/12/23 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
毕业自我鉴定范文
2013/11/06 职场文书
在校生自我鉴定
2014/01/23 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
小学同学聚会感言
2015/07/30 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python