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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 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
phpmyadmin操作流程
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python爬取招聘要求等信息实例
2020/11/20 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
盛大笔试题
2016/11/05 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
出纳员的岗位职责
2014/02/22 职场文书
2014最新实习证明模板
2014/10/02 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python