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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
初识Node.js
Mar 20 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python内建模块struct实例详解
2018/02/02 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
护理专业本科生自荐信
2013/10/01 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
初三学习决心书
2014/03/11 职场文书
质量负责人任命书
2014/06/06 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
Python实现归一化算法详情
2022/03/18 Python