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操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
详解JavaScript函数对象
Nov 15 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
Python 序列的方法总结
2016/10/18 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
黄继光的英雄事迹材料
2014/02/13 职场文书
我的中国梦主题班会
2015/08/14 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
mysql 子查询的使用
2022/04/28 MySQL