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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
jquery中动态效果小结
Dec 16 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
js实现点击烟花特效
Oct 14 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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语法学习笔记1
2006/12/17 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
javascript Keycode对照表
2009/10/24 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
webpack4简单入门实例
2018/09/06 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
python 数据的清理行为实例详解
2017/07/12 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python使用递归的方式建立二叉树
2019/07/03 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python requests.get带header
2020/05/05 Python
详解python的变量缓存机制
2021/01/24 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
学生爱国演讲稿
2014/01/14 职场文书
培训讲师开场白
2015/06/01 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python