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 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
税务会计岗位职责
2014/02/18 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
留学经费担保书
2014/05/12 职场文书
学雷锋的心得体会
2014/09/04 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
保洁员岗位职责
2015/02/04 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
管理失职检讨书范文
2015/05/05 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Java基础之this关键字的使用
2021/06/30 Java/Android
Python之基础函数案例详解
2021/08/30 Python