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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
React props和state属性的具体使用方法
Apr 12 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 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
php获取地址栏信息的代码
2008/10/08 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
js尾调用优化的实现
2019/05/23 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python反转列表的三种方式解析
2019/11/08 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Python实现SMTP邮件发送
2020/06/16 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
信用卡工资证明格式
2014/09/13 职场文书
授权收款委托书
2014/09/23 职场文书
工伤私了协议书范本
2014/11/24 职场文书
redis 解决库存并发问题实现数量控制
2022/04/08 Redis