Надо сохранить на сервер элементы, которые были активированы, и при каждой последующей загрузке, восстанавливать прежнее их положение.
Механика такая - выпадающий список, при клике на какой-либо из подпунктов, создаётся соответствующий ему элемент, а он сам удаляется из списка, и наоборот, при удалении элемента, в выпадающий список добавляется его название. Планировал передавать через пост 1 и 0 при добавлении удалении элемента, чтобы потом как-то воссоздать прежнюю картину исходя из этого, но не додумал как.
Рассматривал вариант с сохранением на сервер создаваемого кода, чтобы потом его передавать при загрузке страницы, но это пахнет костылём, я в деле не так давно, но хотел бы сделать качественно.
Вот, собственно, сам код.
$(document).on('click', '.tab_add', function() {
var post = {};
post.ajaxRequest = true;
if ($(this).data('metod') == 'country') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="country"><a id="primeCountry" href="#baseWin2" aria-controls="baseWin2" role="tab" data-toggle="tab" data-name="searchCountry">База стран</a><button class="delite_tabs" data-metod="country"></button></li>');
post.country = 1;
}
if ($(this).data('metod') == 'currenci') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="currenci"><a id="primeCurrencies" href="#baseWin3" aria-controls="baseWin3" role="tab" data-toggle="tab" data-name ="searchCurrenci">База валют</a><button class="delite_tabs" data-metod="currenci"></button></li>');
post.currenci = 1;
}
if ($(this).data('metod') == 'package') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="package"><a href="#baseWin4" aria-controls="baseWin4" role="tab" data-toggle="tab" data-name="searchPackage">База пакетов</a><button class="delite_tabs" data-metod="package"></button></li>');
post.package = 1;
}
if ($(this).data('metod') == 'activitidirection') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="activitidirection"><a href="#baseWin5" aria-controls="baseWin5" role="tab" data-toggle="tab" data-name="searchActivitiDirection">Направление деят-ти</a><button class="delite_tabs" data-metod="activitidirection"></button></li>');
post.activitidirection = 1;
}
if ($(this).data('metod') == 'branch') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="branch"><a href="#baseWin6" aria-controls="baseWin6" role="tab" data-toggle="tab" data-name="searchMonitoringBranch">Отрасль</a><button class="delite_tabs" data-metod="branch"></button></li>');
post.branch = 1;
}
if ($(this).data('metod') == 'industrialdirection') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="industrialdirection"><a href="#baseWin7" aria-controls="baseWin7" role="tab" data-toggle="tab" data-name="searchIndustrialDirection">Промышленное направление</a><button class="delite_tabs" data-metod="industrialdirection"></button></li>');
post.industrialdirection = 1;
}
if ($(this).data('metod') == 'measuri') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="measuri"><a href="#baseWin8" aria-controls="baseWin8" role="tab" data-toggle="tab" data-name="searchMeasuri">Ед. Измерения</a><button class="delite_tabs" data-metod="measuri"></button></li>');
post.measuri = 1;
}
if ($(this).data('metod') == 'fo') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="fo"><a href="#baseWin9" aria-controls="baseWin9" role="tab" data-toggle="tab" data-name="searchFo">Федеральный округ</a><button class="delite_tabs" data-metod="fo"></button></li>');
post.fo = 1;
}
if ($(this).data('metod') == 'region') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="region"><a href="#baseWin10" aria-controls="baseWin10" role="tab" data-toggle="tab" data-name="searchRegion">Регион</a><button class="delite_tabs" data-metod="region"></button></li>');
post.region = 1;
}
if ($(this).data('metod') == 'logistic') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="logistic"><a href="#baseWin11" aria-controls="baseWin11" role="tab" data-toggle="tab" data-name="searchLogistic">Логистика</a><button class="delite_tabs" data-metod="logistic"></button></li>');
post.logistic = 1;
}
if ($(this).data('metod') == 'quality') {
$('ul.ul__for_tabs').append('<li role="presentation" class="style_of_tabs" id="quality"><a href="#baseWin12" aria-controls="baseWin12" role="tab" data-toggle="tab" data-name="searchQualityMeasure">Качество</a><button class="delite_tabs" data-metod="quality"></button></li>');
post.quality = 1;
}
$(this).remove();
console.log(post);
});
$(document).on('click', '.delite_tabs', function() {
var post = {};
post.ajaxRequest = true;
$(this).parents('li').remove();
if ($(this).data('metod') == 'country') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="country">База стран</li>');
post.country = 0;
}
if ($(this).data('metod') == 'currenci') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="currenci">База валют</li>');
post.currenci = 0;
}
if ($(this).data('metod') == 'package') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="package">База пакетов</li>');
post.package = 0;
}
if ($(this).data('metod') == 'activitidirection') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="activitidirection">Направление деят-ти</li>');
post.activitidirection = 0;
}
if ($(this).data('metod') == 'branch') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="branch">Отрасль</li>');
post.branch = 0;
}
if ($(this).data('metod') == 'industrialdirection') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="industrialdirection">Промышленное направление</li>');
post.industrialdirection = 0;
}
if ($(this).data('metod') == 'measuri') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="measuri">Ед. Измерения</li>');
post.measuri = 0;
}
if ($(this).data('metod') == 'fo') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="fo">Федеральный округ</li>');
post.fo = 0;
}
if ($(this).data('metod') == 'region') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="region">Регион</li>');
post.region = 0;
}
if ($(this).data('metod') == 'logistic') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="logistic">Логистика</li>');
post.logistic = 0;
}
if ($(this).data('metod') == 'quality') {
$('ul.infobase_drop').append('<li class="hover_li tab_add" data-metod="quality">Качество</li>');
post.quality = 0;
}
// row.find('.tab_add').text(post.r_name);
console.log(post);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<p class="cursor_pointer" data-toggle="dropdown" class="dropdown-toggle">
Информационные базы
<b class="caret"></b>
</p>
<ul class="dropdown-menu infobase_drop">
<li class="hover_li tab_add" data-metod="country">База стран</li>
<li class="hover_li tab_add" data-metod="currenci">База валют</li>
<li class="hover_li tab_add" data-metod="package">База пакетов</li>
<li class="hover_li tab_add" data-metod="activitidirection">Направление деят-ти</li>
<li class="hover_li tab_add" data-metod="branch">Отрасль</li>
<li class="hover_li tab_add" data-metod="industrialdirection">Промышленное направление</li>
<li class="hover_li tab_add" data-metod="measuri">Ед. Измерения</li>
<li class="hover_li tab_add" data-metod="fo">Федеральный округ</li>
<li class="hover_li tab_add" data-metod="region">Регион</li>
<li class="hover_li tab_add" data-metod="logistic">Логистика</li>
<li class="hover_li tab_add" data-metod="quality">Качество</li>
</ul>
</div>