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字符编码函数区别分析
Jun 05 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
js异常捕获方法介绍
2013/04/10 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
vue router demo详解
2017/10/13 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue实现引入本地json的方法分析
2018/07/12 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
python机器学习之贝叶斯分类
2018/03/26 Python
儿童python练习实例
2018/05/27 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
linux面试相关问题
2013/04/28 面试题
毕业生自荐书
2013/12/18 职场文书
选秀节目策划方案
2014/06/06 职场文书
社区服务活动小结
2014/07/08 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
自我工作评价范文
2015/03/06 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang