关于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标签的使用
2019独角兽企业重金招聘Python工程师标准>>> select标签的使用 Javascript获取select下拉框选中的的值 jquery方法(前提是已经加载了jquery库 ...
Select 标签可输入
本身select标签是不能输入的,但我们可以通过JS来控制下面给出一个小例子 <div style="position:relative;"> <s ...
struts2中s:select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
struts中select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
Jquery获取select标签的值、文本方式
转载地址:http://fireflywithcat.iteye.com/blog/1581183 首先看html代码: Html代码 <select multiple="mult ...
c# select标签绑定枚举,并以Description做Text显示
今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...
Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决
1.背景前段使用Layui框架,jQuery动态设置的下拉框select标签,加载时而正常时而失效. 本地调试完全没有问题,但是在服务器运行加载成功和失败的比例五五开. 2.解决问题原因:Layu ...
03_MyBatis基本查询，mapper文件的定义，测试代码的编写，resultMap配置返回值，sql片段配置，select标签标签中的内容介绍，配置使用二级缓存，使用别名的数据类型，条件查询ma
1 PersonTestMapper.xml中的内容如下: <?xmlversion="1.0"encoding="UTF-8"?> < ...
select标签中的选项分组
select标签中的选项分组 <select name="showtimes"> <optgroup label="下午一点"> < ...

关于select标签曾经踩过的几个坑！

1.情景展示

2.坑区展示

写在最后

相关推荐：

关于select标签曾经踩过的几个坑！相关推荐

最新文章

热门文章