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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
动态添加js事件实现代码
Mar 12 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
Linux中为php配置伪静态
2014/12/17 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
python getpass模块用法及实例详解
2019/10/07 Python
python中uuid模块实例浅析
2020/12/29 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
2014年督导工作总结
2014/11/19 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android