万恶的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样式的更多相关文章

  1. IE8 下 select option 内容过长 , 展开时信息显示不全解决办法

    IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 但是又不想一个个的修改,怎么办呢,代码如下 : //sel ...

  2. 解决IE下select标签innerHTML插入option的BUG(兼容

    在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错   前言: 这是一个老bug了,现在提供一个完 ...

  3. 解决IE6下select显示在弹出框上问题

    利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...

  4. 解决VMware下安装Ubuntu15不支持1920X1080分辨率的问题

    解决步骤如下: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync ...

  5. 解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作

    window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决 ...

  6. 解决IE6下不支持 png24的透明图片问题

    常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码  _background:none;_filter:progid:DXImageTransform.Microsoft.Alpha ...

  7. jq插件又来了,模拟select下拉框,支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  8. 解决IE6下浮层遮盖select刺穿的问题

    图一未解决刺穿问题: 图二已解决                       解决方法使用iframe间接挡住层,具体方法见源码 源码一(未解决刺穿):   <html xmlns=" ...

  9. div模拟select/option解决兼容性问题及增加可拓展性

    个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...

随机推荐

  1. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  2. Spring代理

    概述 代理(Proxy)是一种设计模式, 提供了对目标对象另外的访问方式:即通过代理访问目标对象. 这样好处: 可以在目标对象实现的基础上,增强额外的功能操作.(扩展目标对象的功能). 举例:假设某用 ...

  3. C#中将String类型保存到本地文件的方法

    今天刚刚遇到,要在WinForm中把一个xml保存到本地, 由于之前是学习java的,一时间还真不知道怎么写, 没想到C#居然那么方便,就3句代码就实现了我要的功能: StreamWriter sw ...

  4. Flutter踩坑日记:Tab导航栏保持子页面状态

    最近应邀票圈小伙伴躺坑Flutter,项目初步雏形完结.以原来的工具链版本为基础做了Flutter版本,不过后面还是需要优化下项目接入Redux,以及扩展一些Native方法. 这里记录一下在开发过程 ...

  5. 技术笔记5 MINA 和事务

    Java NIO框架MINA用netty性能和链接数.并发等压力测试参数好于mina. 特点:1.NIO弥补了原来的I/O的不足,它再标准java代码中提供了高速和面向块的I/O原力的I/O库与NIO ...

  6. Pycharm---新建文件时 自动添加作者时间等信息

    可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...

  7. the first blog in 2017——《论作为程序员的我考研》

    怎么说,人总是有了压力才有动力.想来如今已经是2017年2月13日,2017年已经使用了43天,距离成绩出来还有3天.这个过年是最不充实的一个年,也是时间长达一个月久的“寒假”,因为“考研”.至于考到 ...

  8. [转]Magento Configurable Product

    本文转自:https://docs.magento.com/m1/ce/user_guide/catalog/product-configurable.html A configurable prod ...

  9. 【git1】git+gitHub+webStorm的使用

    Git与GitHub什么关系? git:版本控制工具/系统. github:是一个用git控制的项目托管平台.(同样,码云和Gogs也是基于git的项目托管平台.) ...此文接下来讲的是怎么搭配Gi ...

  10. Java基础——ArrayList与LinkedList(一)

    一.定义 ArrayList和LinkedList是两个集合类,用于储存一系列的对象引用(references). 引用的格式分别为: ArrayList<String> list = n ...