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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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
搜索引擎技术核心揭密
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
JS实现多选框的操作
2020/06/24 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python并发和异步编程实例
2018/11/15 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
Java程序员面试题
2013/07/15 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
文明餐桌活动方案
2014/02/11 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
Python实现批量自动整理文件
2022/03/16 Python