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 简单的进度条实现代码
Mar 11 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
解读ES6中class关键字
Nov 20 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
重学JS之显示强制类型转换详解
Jun 30 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php自动加载方式集合
2016/04/04 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
捐款倡议书
2014/04/14 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
防灾减灾标语
2014/10/07 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers