关于select标签曾经踩过的几个坑!
1.情景展示
select标签,是前端开发界面展示,经常需要用到一个标签,看看下面的坑,你中招了吗?
2.坑区展示
踩坑一:option标签没有声明value属性;
没有声明value属性
<select id="gender">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
使用jquery获取到的默认选项的值为:--请选择--
声明value属性
<select id="gender">
<option value="">--请选择--</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
获取到的值为:""
也就是说如果你没有未option标签声明value属性,取值时,获取的将是选中项的文本信息。
踩坑二:获取select标签选中项对应的文本展示信息;
<select id="gender">
<option value="">--请选择--</option>
<option value="male" selected>男</option>
<option value="female">女</option>
</select>
如上述代码展示,默认选中的是第二个选项:“男”,如果获取这个选项对应的展示信息,而不是获取其对应的value的值?
$('#gender').val();
获取的是:male,不是我们想要的!
//jquery获取方式1:
$('#gender :selected').html();
//jquery获取方式2:
$('#gender option:selected').html();
//jquery获取方式3:
$('#gender :selected').text();
//jquery获取方式4:
$('#gender option:selected').text();
// javascript获取
var selectTag = document.getElementById('gender');
var selectedIndex = selectTag.selectedIndex;
// js方式1
selectTag.options[selectedIndex].innerHTML;
// js方式2
selectTag.options[selectedIndex].innerText;
获取的都是:男,这才是我们想要的。
踩坑三:option标签后面只能跟文本信息
option标签内不能嵌套其它标签,只能嵌套文本。
网页源代码:
F12打开开发工具,查看代码
这说明:浏览器会自动将option标签内的HTML标签剔除,就算添加了也没用!想通过添加标签的方式来控制展示文本的样式,无法实现!
关于select标签曾经踩过的几个坑!的更多相关文章
- <select>标签,不要在select标签中写value属性!!!
<select> select标签,一个选择框标签,在开发中很多时候会用到这个标签,例如选择生日19**年,或者在segmentfault中编辑文章时选择'原创','转载',还是'翻译'等 ...
- html之select标签
循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...
- html中select标签根据枚举获得值的总结
不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...
- select标签让文字垂直居中问题
直接在select样式中添加:padding:npx 0; n的大小视select标签的高度而定.一般为8px左右.
- 获取select标签选中状态 的label的值。
<select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...
- select标签非空验证,第一个option value=""即可
select标签非空验证,第一个option value=""即可,否则不能验证
- [刘阳Java]_MyBatis_映射文件的select标签入门_第3讲
1.Mybatis映射文件的<select>标签主要帮助我们完成SQL语句查询功能,<select>标签它包含了很多属性,下面简单对<select>标签的属性做一个 ...
- selenium处理select标签的下拉框
有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select ...
- 【HTML5】<datalist>标签和<select>标签的比较
<select>标签: 注:该标签定义了下拉列表的实现 <select name = "location"> <option value = &quo ...
随机推荐
- Kafka动态增加Topic的副本
一.kafka的副本机制 由于Producer和Consumer都只会与Leader角色的分区副本相连,所以kafka需要以集群的组织形式提供主题下的消息高可用.kafka支持主备复制,所以消息具备高 ...
- 步步为营-22-xml登录
说明:通过xml完成用户登录信息的判断 1 搭建UI页面 2 新建一个student类,类中包含以上属性 public class Student { public int ID { get; set ...
- Spring整合Quartz实现动态定时器,相关api,定时器添加,删除,修改
一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...
- C/S权限系统得到拼音和五笔的自定义函数(二)
得到五笔: CREATE FUNCTION [dbo].[fun_getWB](@Str VARCHAR(2000)) RETURNS VARCHAR(2000) AS BEGIN DECLARE @ ...
- 指定一个M3U8文件,判断它包含的TS文件是不是都存在。指定一个Office生成的Swf文件,判断它包含的Swf文件是不是完整都存在。
static void Main(string[] args) { //检查M3u8文件 var fiPath = @"D:\Work\CloudPlatformUtil\CloudPlat ...
- hdu 1385 Floyd 输出路径
Floyd 输出路径 Sample Input50 3 22 -1 43 0 5 -1 -122 5 0 9 20-1 -1 9 0 44 -1 20 4 05 17 8 3 1 //收费1 3 // ...
- asp.net core 微信APP支付(扫码支付,H5支付,公众号支付,app支付)之4
微信app支付需要以下参数,类封装如下 public class WxPayModel { /// <summary> /// 应用ID /// </summary> publ ...
- BZOJ1477 青蛙的约会 扩展欧几里德
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1477 题意概括 两只青蛙,现在分别在x,y的位置,以m,n的速度在周长为L的环形跑道上面跑. 问他 ...
- 高德地图web端笔记;发送http请求的工具类
1.查询所有电子围栏 package com.skjd.util; import java.io.BufferedReader; import java.io.InputStream; import ...
- 6-14 Abbott的复仇 uva816
我的第一题bfs 将方向固定 NESW 然后左转和右转就是+3和+1!!! 还有就是 建立一个数组 储存父节点 这样就可以往回打印出路径 打印的截至条件是 d[][][]==0时 说明到 ...