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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
javascript之函数直接量(function(){})()
Jun 29 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
对python中的装包与解包实例详解
2019/08/24 Python
python tkinter控件布局项目实例
2019/11/04 Python
python重要函数eval多种用法解析
2020/01/14 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
团代会闭幕词
2015/01/28 职场文书
长城英文导游词
2015/01/30 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
药房管理制度范本
2015/08/06 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python