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 相关文章推荐
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 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编程最快明白》第三讲:php数组
2010/11/01 PHP
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python素数检测实例分析
2015/06/15 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python input函数使用实例解析
2019/11/22 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
如何写好升职自荐信
2014/01/06 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
保护环境演讲稿
2014/05/10 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
会议开幕词
2015/01/28 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python