JS、jQuery中select的用法详解


Posted in Javascript onApril 21, 2016

1.js

var obj=document.getElementById(selectid);
obj.options.length = 0; //清除所有内容
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态
obj.add(new Option("4","4")); ”文本",”值"
var index = obj.selectedIndex;obj.options.remove(index);//删除选中项

2.jquery

$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").").find('option:selected').text(); 获取select选中的text
$("#select_id").val(); 获取select选中的value
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option
$("#mselect_id").change(function(){
//添加所需要执行的操作代码
})

补充: js获取select标签选中的值

var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值

jQuery中获得选中select值

第一种方式

$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引

第二种方式

$("#tesetSelect").find("option:selected").text();//选中的文本
…….val();
…….get(0).selectedIndex;

以上内容是小编给大家介绍的JS、jQuery中select的用法详解,希望对大家有所帮助!

Javascript 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
浅析JS动态创建元素【两种方法】
Apr 20 #Javascript
纯JS代码实现一键分享功能
Apr 20 #Javascript
JavaScript动态生成二维码图片
Apr 20 #Javascript
JS动态创建元素的两种方法
Apr 20 #Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 #Javascript
You might like
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
CI框架中zip类应用示例
2014/06/17 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
深入解析Python中的WSGI接口
2015/05/11 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
军训自我鉴定100字
2014/02/13 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
条幅标语大全
2014/06/20 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
个人培训总结
2015/03/05 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
特此通知格式
2015/04/27 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android