JS & JQuery 动态添加 select option


Posted in Javascript onJune 08, 2016

今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别

JS:

var selid = document.getElementById("sltid");
for(var i=0; i<10;i++){ //循环添加多个值
sid.option[i] = new Option(i,i);
}
sid.options[sid.options.length]=new Option("1","2"); // 在最后一个值后面添加多一个

JQuery:

$("#selectId").append("<option value='"+value+"'>"+text+"</option>");

当然除了这句,还有设置默认选择值、第一个的值、最后一个的值、第N个的值等等的,所以在网上搜了一上:

jQuery获取Select选择的Text和Value:

1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery添加/删除Select的Option项:

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

以上所述是小编给大家介绍的JS & JQuery 动态添加 select option的相关知识 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 #Javascript
浅谈几种常用的JS类定义方法
Jun 08 #Javascript
浅谈javascript中的constructor
Jun 08 #Javascript
js定义类的几种方法(推荐)
Jun 08 #Javascript
JavaScript必知必会(七)js对象继承
Jun 08 #Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 #Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
简单了解如何封装自己的Python包
2020/07/08 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
护士自我评价范文
2014/01/25 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
考试诚信承诺书
2014/05/23 职场文书
计算机专业求职信
2014/06/02 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2015年调度员工作总结
2015/04/30 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书