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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
浅析javascript函数表达式
Feb 10 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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的特殊设置
2006/10/09 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php函数连续调用实例分析
2015/07/30 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
AngularJS基础知识
2014/12/21 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python optparse模块使用实例
2015/04/09 Python
Python类的动态修改的实例方法
2017/03/24 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
《郑和远航》教学反思
2014/04/16 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Hive常用日期格式转换语法
2022/06/25 数据库