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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
javascript定时器完整实例
Feb 10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
js实现三角形粒子运动
Sep 22 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php删除指定目录的方法
2015/04/03 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
javascript函数库-集合框架
2007/04/27 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python读取ini配置文件过程示范
2019/12/23 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
校庆活动方案
2014/03/31 职场文书
教师评语大全
2014/04/28 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
中国梦团日活动总结
2014/07/07 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
python析构函数用法及注意事项
2021/06/22 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python