文档章节

Jquery获取select标签的值、文本方式

依宸2016
 依宸2016
发布于 2016/11/11 12:19
字数 696
阅读 5
收藏 0

转载地址:http://fireflywithcat.iteye.com/blog/1581183

首先看html代码:

Html代码   收藏代码
  1. <select multiple="multiple" id="select1"  size=”5”  name="dd">  
  2. <optgroup label="坑爹组合">  
  3.             <option value="1" disabled="disabled">我勒个去!</option>  
  4.             <option value="2">坑爹啊!</option>  
  5. </optgroup>  
  6.             <option value="3">悲催啊!</option>  
  7.             <option id=”si” selected="selected ”  value="4">冬瓜!</option>  
  8.             <option value="5">我去!</option>  
  9.         </select>  


先来说说<select>这个标签吧!
⑴ multiple这个属性是可以多选!它的写法就是:multiple="multiple"
⑵ size=”3”,就是这个select标签顶多可有3个option
⑶ disabled="disabled":这个属性就是禁止下拉框下拉!就是不能用了!
⑷ option中的seleted=”selected” 就是在初始化时,下拉框中显示的是这个option了!说白了就是默认选定了!
⑸ optgroup这个标签就是在option选项中分类,方便我们选择。但是这不是一个option!
⑹ disabled="disabled" 的意思就是禁止这个option选择,就是你只能看着 但是无法选择。很坑爹!
⑺ value属性就是value,没有什么用处,给服务器传送的时候就是value。

呵呵!写了这么多没用的,接下来写Jquery了!
⑴ $("#select1").find("option:selected").text()
这个意思就是选择<select>标签,然后find选择 option标签中带有selected属性的标签,最后获取这个标签的text内容,文中就是获取:“冬瓜!“
⑵ $("#select1").val()
就是获取上面提到的value值了,但是有一点得注意:如果在所有option中有默认值selected属性时,这时这句代码的结果就是这个option的value值。如果所用option中都没有selected属性,则会显示第一个option的value值。如果要是没有设定value就会显示text()内容。
文中:显示结果是“4”,如果把这行的value=“4”去掉,就会显示:“冬瓜!”
⑶    $("#si").attr("value","donggua");
      $("#si ").val("donggua");
      $("#si ").get(0).value = "donggua";
这个就不解释了!就是给option赋值!
⑷ $("#select1").get(0).options[3].value
Get(0)获取这个select的DOM对象,对其进行操作。这是对其值进行操作,可以把value改为text,对其text进行操作!也可以把selected替换了,不过返回的是:false或者true
⑸ $("#select1 option[text='坑爹啊!']").attr("selected", true)
这个都明白吧,设置selected属性
⑹ $("#select1 ").append("<option value='8' selected='selected'>donggua</option>");
Append都知道就是元素内部追加内容,这里我就是加入一行option的意思
⑺ $("#select1").prepend("<option value='9'>请选择</option>");
Prepend是预设的意思,在这里也是添加一行option的意思,跟上面的区别是。Prepend是在select的第一位添加,而append是在最后一位添加。
⑻  $("#select1 option:last").remove();//删除最后一行
$("#select1 option[value='4']").remove();//删除第四行
$("#san").remove(); //删除第三行;
$("#select1 ").empty(); //删除全部option
……都是自己测试过的!

本文转载自:http://blog.csdn.net/liwb1987/article/details/50721410

依宸2016
粉丝 1
博文 94
码字总数 0
作品 0
济南
高级程序员
私信 提问
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
0
0
从零开始学 Web 之 jQuery(二)获取和操作元素的属性

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java System 类

Java System 类 System 系统类 主要用于获取系统的属性数据。 System类常用的方法: arraycopy(Object src, int srcPos, Object dest, int destPos, int length) 一般 从指定源数...

Hellation
16分钟前
0
0
Nginx源码安装和调优技巧

本文内容 Nginx与apache的对比 实战1:在“腾讯云主机”上源码编译安装Nginx 实战2:Nginx调优之隐藏版本信息防止黑客扫描识别漏洞 实战3:设置网页缓存 实验环境: 使用RHEL6.5/centos6.5 6...

寰宇01
18分钟前
0
0
linux jenkins添加windows节点,实现自动化部署

背景: 要基于jenkins的做代码自动更新部署,现状是jenkins在linux上,目标服务器的tomcat在windows上,如何将代码从linux发送到windows未找到合适方案,并且后续如何远程调用执行windows批处...

shzwork
24分钟前
0
0
MySQL同表更新与查询冲突

MySQL version: 5.5 MySQL报错: You can't specify target table 'document_basic' for update in FROM clause 原因:MySQL不支持对同表同时更新+查询 解决方案:查询结果使用中间表接收,或......

Hzhodor
25分钟前
0
0
最长不重复字符子串

给定一个字符串,请你找出其中不含有重复字符的最长子串的长度。 这个有点像最长前缀匹配,简单的想到的就是暴力搜索一下,得到最大的子串,这样就是时间复杂度比较大,可以看到里面有两个f...

woshixin
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部