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打造TabPanel效果代码
May 22 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
浅谈JS for循环中使用break和continue的区别
Jul 21 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 购物车的例子
2009/05/04 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
django 控制页面跳转的例子
2019/08/06 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Django实现基于类的分页功能
2019/10/31 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
考试退步检讨书
2014/01/15 职场文书
护士毕业实习感言
2014/03/05 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
开除通知书范本
2015/04/25 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers