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 相关文章推荐
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
理解JS绑定事件
Jan 19 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
微信小程序实现刷脸登录
May 25 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
JS class语法糖的深入剖析
Jul 07 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中for循环语句的几种变型
2006/11/26 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
php比较相似字符串的方法
2015/06/05 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python将多个excel表格合并为一个表格
2021/02/22 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
老龙头导游词
2015/02/11 职场文书
高中政治教学反思
2016/02/23 职场文书
工作建议书范文
2019/07/08 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python