解决IE下select option不支持display none样式
万恶的IE,option竟然不支持display样式,想到的解决思路有二个:
1、ajax联动查询
2、jQuery的remove()、after()方法
方法1的不好之处是初始页面,需要显示全部IP,本来已经从后台查询了一次,如果再利用ajax,会给服务器造成压力,所以采用方法2。
后台code
// 获取所有平台类型IP
$vcenter_ip = $this->vcenter_mgr->get_vcenter_info(null, null, 'ip, virt_type', 'INET_ATON(ip)');
$virt_ip = array();
if (!empty($vcenter_ip)) {
foreach ($vcenter_ip as $arr) {
$virt_ip[]= array(
'virt_type' => $arr['virt_type'],
'virt_ip' => $arr['ip'],
);
}
}
exit(json_encode($virt_ip));
前端code
// 初始时显示所有IP
var virt_ip_obj = <?= $virt_ip ?>; // 后台返回的json数据
var virt_ip_opt = '';
if (virt_ip_obj.length > 0) {
$.each(virt_ip_obj, function(index, val) {
virt_ip_opt += '<option class="ip_opt" value="'+val.virt_ip+'">'+val.virt_ip+'</option>';
});
}
$('.virt_ip option:first').after(virt_ip_opt); // change事件
$('.adv-table').on('change', '.tts-options', function(event) {
var virt_type = $(this).val();
$('select .ip_opt').remove(); // 移除所有option项
if (virt_type > 0) {
var new_ip_opt = '';
if (virt_ip_obj.length > 0) {
$.each(virt_ip_obj, function(i, arr) {
if (arr.virt_type === virt_type) {
new_ip_opt += '<option class="ip_opt" value="'+arr.virt_ip+'">'+arr.virt_ip+'</option>';
}
});
}
$('.virt_ip option:first').after(new_ip_opt); // 选择指定平台时只显示指定平台下的所有IP
} else {
$('.virt_ip option:first').after(virt_ip_opt); // 选择所有平台时,显示全部IP
}
});

解决IE下select option不支持display none样式的更多相关文章
- IE8 下 select option 内容过长 , 展开时信息显示不全解决办法
IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 但是又不想一个个的修改,怎么办呢,代码如下 : //sel ...
- 解决IE下select标签innerHTML插入option的BUG(兼容
在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错 前言: 这是一个老bug了,现在提供一个完 ...
- 解决IE6下select显示在弹出框上问题
利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...
- 解决VMware下安装Ubuntu15不支持1920X1080分辨率的问题
解决步骤如下: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync ...
- 解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作
window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决 ...
- 解决IE6下不支持 png24的透明图片问题
常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码 _background:none;_filter:progid:DXImageTransform.Microsoft.Alpha ...
- jq插件又来了,模拟select下拉框,支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
- 解决IE6下浮层遮盖select刺穿的问题
图一未解决刺穿问题: 图二已解决 解决方法使用iframe间接挡住层,具体方法见源码 源码一(未解决刺穿): <html xmlns=" ...
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
随机推荐
- C#:使用HtmlAgilityPack解析Html
推荐阅读: HtmlAgilityPack 入门教程1 HtmlAgilityPack入门教程2 向HtmlAgilityPack道歉:解析HTML还是你好用 获取html中meta标签中的conte ...
- arm 算力运算
MIPS: Million Instructions executed Per SecondDMIPS: Dhrystone Million Instructions executed Per Sec ...
- msvcr110.dll丢失解决方案
http://www.microsoft.com/zh-CN/download/details.aspx?id=30679 打开之后,在“选择语言”里选择“简体中文”,然后点击右边的“下载”按钮.
- Sublime Text3 一些实用设置
字体大小 "font_size": 14 高亮编辑中的那一行 "highlight_line": true 当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光 ...
- 高可用Hadoop平台-答疑篇
1.概述 这篇博客不涉及到具体的编码,只是解答最近一些朋友心中的疑惑.最近,一些朋友和网友纷纷私密我,我总结了一下,疑问大致包含以下几点: 我学 Hadoop 后能从事什么岗位? 在遇到问题,我该如何 ...
- Java源码阅读(不断补充)
java.util.LinkedList LinkedList是实现了List接口的双链表实现,拥有list的所有方法并且允许所有元素(包括null). 双向链表也叫双链表,是链表的一种,它的每个数据 ...
- js 之 this的用法
该篇文章混合了比较多文章,由于自己也水平有限,大家就将就着看下吧,详情可以参看<JavaScript语言精粹>,不过文章提供了很多例子,供大家参阅思考. 首先关于this我想说一句话,这句 ...
- 网络之XML解析-原生
Json和XML都属于字符串,用于跨平台,前面总结了下Json,下面看下XML. XML定义这些百度比我说的清,不再啰嗦,直接代码,我喜欢把东西都放进注释. 一.首先看下要解析的XML内容 <? ...
- Dockerfile构建镜像
Dockerfile构建镜像的步骤: 从基础镜像运行一个容器 执行一条指令,对容器做出修改 执行类似docker commit的操作,提交一个新的镜像层 再基于刚提交的镜像运行一个新的容器 执行Doc ...
- mysql 创建数据库,添加用户,用户授权
一.创建mysql数据库 1.创建数据库语法 --创建名称为"testdb"数据库,并设定编码集为utf8 CREATE DATABASE IF NOT EXISTS testdb ...