解決IE下select option不支持display none樣式

萬惡的IE，option居然不支持display樣式，想到的解決思路有二個：

　　一、ajax聯動查詢

　　二、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
    }
});