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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
js Calender控件使用详解
Jan 05 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
js仿京东放大镜效果
Aug 09 Javascript
详解JavaScript 中的批处理和缓存
Nov 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
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python实现批量下载文件
2015/05/17 Python
Python实现基于POS算法的区块链
2018/08/07 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python pandas库中的isnull()详解
2019/12/26 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
应届生高等护理求职信
2013/10/12 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
店长职务说明书
2014/02/04 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
常务副总经理任命书
2014/06/05 职场文书
三下乡活动心得体会
2016/01/23 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS