Здравствуйте уважаемое сообщество. Нужна помощь.
На форме присутствует два multiselect. Первый select заполнен данными из базы данных. Второй select при инициализации пустой. В последующем пользователь может выбрать определенные значения из первого select и по нажатию кнопки (на кнопке весит обработчик JQuery) перенести их во второй select (служит в виде фильтра для построения отчетов).
Проблемы: - Плывет верстка в браузерах IE (на текущий момент используются версии от 8 до 11) - при установке режима совместимости либо плывет верстка, либо тормозит JavaScript
Вопросы - Какие есть простые решения в поддержкой IE (ActiveX не предлагать - отказываемся от них) - Как сверстать хотя бы под IE 8 - Натолкните что можно почитать, посмотреть.
Спасибо.
Вот коды: Страница
<html>
<head>
<title>Филтр</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/stl.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/html5shiv/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-lg-5"><p class="text-center">Доступные</p></th>
<th class="col-lg-2"></th>
<th class="col-lg-5"><p class="text-center">Выбранные</p></th>
</tr>
</thead>
<tbody class="tbody">
<tr class="tbody-tr">
<td class="tbody-tr-td">
<div class="sel">
<select multiple class="form-control" id="oSource" name="oSource">
<option value=1>00001</option>
<option value=2>00002</option>
<option value=3>00003</option>
<option value=4>00004</option>
<option value=388>00005</option>
<option value=323>04600</option>
<option value=5>04730</option>
<option value=501>04733</option>
<option value=499>04736</option>
<option value=632>10000</option>
<option value=653>100000</option>
<option value=7>10001</option>
<option value=8>10002</option>
<option value=9>10003</option>
<option value=10>10004</option>
<option value=11>10005</option>
<option value=12>10007</option>
<option value=13>10008</option>
<option value=369>00000</option>
<option value=1>00001</option>
<option value=2>00002</option>
<option value=3>00003</option>
<option value=4>00004</option>
<option value=388>00005</option>
<option value=323>04600</option>
<option value=5>04730</option>
<option value=501>04733</option>
<option value=499>04736</option>
<option value=632>10000</option>
<option value=653>100000</option>
<option value=7>10001</option>
<option value=8>10002</option>
<option value=9>10003</option>
<option value=10>10004</option>
<option value=11>10005</option>
<option value=12>10007</option>
<option value=13>10008</option>
<option value=369>00000</option>
<option value=1>00001</option>
<option value=2>00002</option>
</select>
</div>
</td>
<td>
<div id=controls>
<div>
<input id=swapLeft type=button value=">">
<br>
<input id=swapRight type=button value="<">
</div>
<br>
<br>
<div>
<input id=swapLeftAll type=button value=">>">
<br>
<input id=swapRightAll type=button value="<<">
</div>
<button id=ascending>
Ascending
</button>
<button id=descending>Descending</button>
<input id=AAlert type=button value=AAler>
</div>
</td>
<td class="tbody-tr-td">
<div class="sel">
<select multiple class="form-control" id="oTarget" name="oTarget"></select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="lib/jquery/jquery-1.11.2.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/arm/filter_objects/script.js"></script>
</body>
Файл script.js
$(document).ready(function() {
$('#ascending').click(function() {
//SORTER.sort('.sortable');
var mylist = $('#oSource');
var listitems = mylist.children('option').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
});
$('#descending').click(function() {
SORTER.sorter('#oSource');
});
$('#swapLeft').click(function() {
SWAPLIST.swap('#oSource', '#oTarget');
var tekelement = $("#oSource option:selected").val();
tekelement = tekelement + 1;
SORTER.sorter('#oSource');
SORTER.sorter('#oTarget');
$("#oSource :nth-child(2)").attr("selected", "selected");
$("#oTarget :nth-child(1)").attr("selected", "selected");
});
$('#swapRight').click(function() {
SWAPLIST.swap('#oTarget', '#oSource');
SORTER.sorter('#oSource');
SORTER.sorter('#oTarget');
});
$('#swapLeftAll').click(function() {
SWAPLIST.swapAll('#oSource', '#oTarget');
SORTER.sorter('#oSource');
SORTER.sorter('#oTarget');
});
$('#swapRightAll').click(function() {
SWAPLIST.swapAll('#oTarget', '#oSource');
SORTER.sorter('#oSource');
SORTER.sorter('#oTarget');
});
$('.invert').click(function(e) {
SWAPLIST.invert($(this).parent().find('select'));
e.preventDefault();
});
$('#search').keyup(function() {
SWAPLIST.search("#oTarget, #oSource", $(this).val());
});
});
var SWAPLIST = {};
SWAPLIST.swap = function(from, to) {
$(from)
.find(':selected')
.appendTo(to);
}
SWAPLIST.swapAll = function(from,to) {
$(from)
.children()
.appendTo(to);
}
SWAPLIST.invert = function(list) {
$(list)
.children()
.prop('selected', function(i, selected) {
return !selected;
});
}
SWAPLIST.search = function(list, search) {
$(list)
.children()
.prop('selected', false)
.filter(function() {
if (!search) {
return false;
}
return $(this)
.text()
.toLowerCase()
.indexOf(search.toLowerCase()) > - 1
})
.prop('selected', true);
}
var SORTER = {};
SORTER.sorter = function(name_list) {
var mylist = $(name_list)
var listitems = mylist.children('option').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
}
Песочница для примера: https://jsfiddle.net/Toshax/4dmxszu4/
Обновление
Я бы с радостью забыл бы. Но на заводе порядка 4000 компьютеров. По корпоративному стандарту администраторов браузеры разрешены IE (ибо со слов админов они корректно поддерживают AD авторизацию), а версий этих браузеров начиная от 5 и заканчивая 11
По поводу режима совместимости. Вероятно грамотно не смогу объяснить, наверное лучше показать. Есть подозрение что-то где-то жёстко задан этот режим EI5. В 11 IE
D IE8 отображается также как на 1 скрине. ПарамертыЖ Режим обозревателя IE8, Режим документов совместимый.