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标签曾经踩过的几个坑!的更多相关文章

  1. <select>标签,不要在select标签中写value属性!!!

    <select> select标签,一个选择框标签,在开发中很多时候会用到这个标签,例如选择生日19**年,或者在segmentfault中编辑文章时选择'原创','转载',还是'翻译'等 ...

  2. html之select标签

    循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...

  3. html中select标签根据枚举获得值的总结

    不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...

  4. select标签让文字垂直居中问题

    直接在select样式中添加:padding:npx 0; n的大小视select标签的高度而定.一般为8px左右.

  5. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...

  6. select标签非空验证,第一个option value=""即可

    select标签非空验证,第一个option value=""即可,否则不能验证

  7. [刘阳Java]_MyBatis_映射文件的select标签入门_第3讲

    1.Mybatis映射文件的<select>标签主要帮助我们完成SQL语句查询功能,<select>标签它包含了很多属性,下面简单对<select>标签的属性做一个 ...

  8. selenium处理select标签的下拉框

    有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select  ...

  9. 【HTML5】<datalist>标签和<select>标签的比较

    <select>标签: 注:该标签定义了下拉列表的实现 <select name = "location"> <option value = &quo ...

随机推荐

  1. Kafka动态增加Topic的副本

    一.kafka的副本机制 由于Producer和Consumer都只会与Leader角色的分区副本相连,所以kafka需要以集群的组织形式提供主题下的消息高可用.kafka支持主备复制,所以消息具备高 ...

  2. 步步为营-22-xml登录

    说明:通过xml完成用户登录信息的判断 1 搭建UI页面 2 新建一个student类,类中包含以上属性 public class Student { public int ID { get; set ...

  3. Spring整合Quartz实现动态定时器,相关api,定时器添加,删除,修改

    一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...

  4. C/S权限系统得到拼音和五笔的自定义函数(二)

    得到五笔: CREATE FUNCTION [dbo].[fun_getWB](@Str VARCHAR(2000)) RETURNS VARCHAR(2000) AS BEGIN DECLARE @ ...

  5. 指定一个M3U8文件,判断它包含的TS文件是不是都存在。指定一个Office生成的Swf文件,判断它包含的Swf文件是不是完整都存在。

    static void Main(string[] args) { //检查M3u8文件 var fiPath = @"D:\Work\CloudPlatformUtil\CloudPlat ...

  6. 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 // ...

  7. asp.net core 微信APP支付(扫码支付,H5支付,公众号支付,app支付)之4

    微信app支付需要以下参数,类封装如下 public class WxPayModel { /// <summary> /// 应用ID /// </summary> publ ...

  8. BZOJ1477 青蛙的约会 扩展欧几里德

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1477 题意概括 两只青蛙,现在分别在x,y的位置,以m,n的速度在周长为L的环形跑道上面跑. 问他 ...

  9. 高德地图web端笔记;发送http请求的工具类

    1.查询所有电子围栏 package com.skjd.util; import java.io.BufferedReader; import java.io.InputStream; import ...

  10. 6-14 Abbott的复仇 uva816

    我的第一题bfs 将方向固定  NESW  然后左转和右转就是+3和+1!!! 还有就是  建立一个数组 储存父节点  这样就可以往回打印出路径   打印的截至条件是 d[][][]==0时  说明到 ...