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 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jquery分割字符串的方法
Jun 24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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
世界收音机发展史
2021/03/01 无线电
php5数字型字符串加解密代码
2008/04/24 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHP运行模式汇总
2016/11/06 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python的socket编程入门
2018/01/29 Python
浅析python继承与多重继承
2018/09/13 Python
python命令行参数用法实例分析
2019/06/25 Python
Python 远程开关机的方法
2020/11/18 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
公积金转移接收函
2014/01/11 职场文书
劳模先进事迹材料
2014/12/24 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
新员工入职感想
2015/08/07 职场文书