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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
js格式化时间的方法
Dec 18 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
three.js实现3D视野缩放效果
Nov 16 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
输入自动提示搜索提示功能的使用说明: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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
bootstrap table实例详解
2017/01/06 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
node内置调试方法总结
2018/02/22 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
python使用tensorflow深度学习识别验证码
2018/04/03 Python
初中毕业生的自我评价
2014/03/03 职场文书
法人代表授权委托书
2014/04/08 职场文书
2015年计划生育责任书
2015/05/08 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA