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 相关文章推荐
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
Angular 容器部署的方法
Apr 17 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
我的求职计划书
2014/01/10 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
法律进社区实施方案
2014/03/21 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
大学生读书笔记大全
2015/07/01 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python