jquery获取下拉框选中值及动态添加移除选项的操作

ByteCodeTrail
• 阅读 206

 下拉框(select)是我们在做Web系统时经常会用到的html标签,最长碰见的就是获取下拉框选中的值或者文本的问题了,当然还有动态添加下拉框选项或者移除下拉框选项以及设置默认选中值的操作,很多刚开始接触jQuery的人可能对于操作下拉框这样的问题会比较困惑,这边我就特意整理了一些jQuery操作下拉框的常用方法。 1.jQuery获取Select选择的Text和Value:
语法解释:
1
2
3
4
5

 1. $(
 "#select_id"
 ).change(
 function
 (){
 //code...}); //为Select添加事件,当选择其中一项时触发
 2. 
 var

 

 checkText=$(
 "#select_id"
 ).find(
 "option:selected"
 ).text(); 
 //获取Select选择的Text
 3. 
 var

 

 checkValue=$(
 "#select_id"
 ).val(); 
 //获取Select选择的Value
 4. 
 var

 

 checkIndex=$(
 "#select_id "
 ).get(0).selectedIndex; 
 //获取Select选择的索引值
 5. 
 var

 

 maxIndex=$(
 "#select_id option:last"
 ).attr(
 "index"
 ); 
 //获取Select最大的索引值

2.jQuery设置Select选择的 Text和Value:
语法解释:
1
2
3

 1. $(
 "#select_id "
 ).get(0).selectedIndex=1; 
 //设置Select索引值为1的项选中
 2. $(
 "#select_id "
 ).val(4); 
 // 设置Select的Value值为4的项选中
 3. $(
 "#select_id option[text='jQuery']"
 ).attr(
 "selected"
 true
 ); 
 //设置Select的Text值为jQuery的项选中

3.jQuery添加/删除Select的Option项:
语法解释:
1
2
3
4
5
6

 1. $(
 "#select_id"
 ).append(
 "<option value='Value'>Text</option>"
 ); 
 //为Select追加一个Option(下拉项)
 2. $(
 "#select_id"
 ).prepend(
 "<option value='0'>请选择</option>"
 ); 
 //为Select插入一个Option(第一个位置)
 3. $(
 "#select_id option:last"
 ).remove(); 
 //删除Select中索引值最大Option(最后一个)
 4. $(
 "#select_id option[index='0']"
 ).remove(); 
 //删除Select中索引值为0的Option(第一个)
 5. $(
 "#select_id option[value='3']"
 ).remove(); 
 //删除Select中Value='3'的Option
 5. $(
 "#select_id option[text='4']"
 ).remove(); 
 //删除Select中Text='4'的Option

转载于猿2048:➩《jquery获取下拉框选中值及动态添加移除选项的操作》

点赞
收藏
评论区
推荐文章
达里尔 达里尔
2年前
遇到的问题及解决方案
Vue下拉框赋值之后,点击下拉框没反应vuechange(){//在下拉框触发的change事件加上下面这段代码,重载this.$forceUpdate()}Vue3Htmljs
Chase620 Chase620
4年前
vue--封装后台管理项目通用组件
先看一下我的项目的页面构成几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页这里我定义了两个组件:myFilter和myTablemyFilter组件该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的input(通过vif标识可选;由inputName指定标题和默认文本
皕杰报表实现下拉框联动
单击【摘要】视图中的按钮,弹出【新建数据集】对话框后,填写名称、选择数据源名称,选择类型,这里选择“SQL语句”,单击【下一步】,填写sql语句,本例中用到两个数据表“ds”表和“ds1”表,所建数据集sql分别编辑为:ds:select货主地区from订单groupby货主地区ds1:select货主城市,货主地区from订单grou
Stella981 Stella981
3年前
Js和Thymeleaf如何获取model中的值
简述在大多数的项目架构中,使用SPringBoot发布微服务,前端采用Thymeleaf作为Html模版,使用Jquery作为动态脚本,那么Thymeleaf和Jquery是如何获取Model中的数据呢?Jquery获取Model中的数据方法1:将model中的值赋给hidden,然后Js获取隐藏域的值。
Stella981 Stella981
3年前
ASP.NET MVC 4 之 Jquery Ajax
//前台界面,一个下拉框,一根文本框<select id"SEX"    <option男</option    <option女</option    <option未知</option</select<input id "DESC"  type"text"/
Wesley13 Wesley13
3年前
MySQL学习——操作表
MySQL学习——操作表摘要:本文主要学习了使用DDL语句操作表的方法。创建表语法1createtable表名表定义选项表选项;表定义选项用来创建定义表的结构,由列名(col\_name)、列的定义(column\_definition)以及可能的空值说明、完
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
3年前
JQuery判断radio是否选中,获取选中值
他对radio操作功能,以后在添加。直接上代码,别忘记引用JQuery包<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"<htmlxmlns"http://w
Stella981 Stella981
3年前
Postman的安装
在网上下载一个Postman插件,1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。!打开Chrome扩展管理器(http://chromecj.com/Content/kindeditor/attached/image/20140926/201409262348
Stella981 Stella981
3年前
JFace对文本框的自动完成和内容助理小结
自动填充有两种TextContentAdapter只能用于Text文本框ComboContentAdapter只能用于Combo下拉框AutoCompleteField和ContentProposalAdapter的区别AutoCompleteField用于自动完成,例如你输入“山”这个字
Wesley13 Wesley13
3年前
(selenium+python)_UI自动化05_定位select下拉列表
前言web网页大多选择功能使用下拉列表方式实现,在selenium进行自动化过程中,可通过Select类实现下拉列表的多种操作。Select常用方法select_by_index()通过索引定位选项select_by_value()通过value值定位选项select_by_visib