今天工作时遇到一个需求是隐藏select某个option值,如果直接使用display:none,对option是不生效的,因此上网搜索了一下,终于找到解决方法。
参考地址1:http://guchao2012.iteye.com/blog/1829276
参考地址2:https://blog.csdn.net/sanyuedexuanlv/article/details/26455925
因为是工作中解决问题,没有进行深入研究,具体可以搜索一下wrap()使用方法
我自己写的测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert(123456);
if($("#ceshi").val()==10){
//warp('<span>')的作用是给option外层套上一个<span>标签,这样display:none才会生效,如果直接对option使用display:none来隐藏option是不生效的
$("#check").children('option[value="0"]').wrap('<span>').hide();
}else{
//$("#check").children('option[value="0"]').unwrap();
$("#check").children('option[value="0"]').show();
}
});
</script>
</head>
<body>
<input type="text" value="10" id="ceshi"/>
<select id="check">
<option value="0"></option>
<option value="1">你好</option>
<option value="2">啦啦啦啦</option>
<option value="3">哈哈哈哈</option>
</select>
</body>
</html>