Помогите сделать выпадающий список?
<html> <head> <meta charset="UTF-8"> <div> <tr> <td style="height: 50px"> <select> <option value ="1">Регион1</option> <option value ="2">Регион2</option> <option value ="3">Регион3 </option> </select> <input type="submit" name="submit" value="вибрать"> </td> </tr> </div> <link href="./css/jqvmap.css" rel="stylesheet"> <script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script> <script src="./js/jqvmap.js"></script> <script src="./js/ukraine.js"></script> <script> var data_obj = { }; colorRegion = '#1076C8'; // Цвет всех регионов focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов highlighted_states = {}; // Массив подсвечиваемых регионов, указанных в массиве data_obj for(iso in data_obj){ highlighted_states[iso] = selectRegion; } $(document).ready(function() { $('#vmap').vectorMap({ map: 'ukraine', backgroundColor: '#ffffff', borderColor: '#ffffff', borderWidth: 2, color: colorRegion, colors: highlighted_states, hoverOpacity: 0.7, enableZoom: true, showTooltip: true, // Отображаем объекты если они есть onLabelShow: function(event, label, code){ name = '<strong>'+label.text()+'</strong><br>'; if(data_obj[code]){ list_obj = '<ul>'; for(ob in data_obj[code]){ list_obj += '<li>'+data_obj[code][ob]+'</li>'; } list_obj += '</ul>'; }else{ list_obj = ''; } label.html(name + list_obj); list_obj = ''; }, // Клик по региону onRegionClick: function(element, code, region){ alert(region+' - ' +code); } }); }); // Выводим список объектов из массива $(document).ready(function() { for(region in data_obj){ for(obj in data_obj[region]){ $('.list-object').append('<li><a href="'+selectRegion+'" id="'+region+'" class="focus-region">'+data_obj[region][obj]+' ('+region+')</a></li>'); } } }); // Подсветка регионов при наведении на объекты $(function(){ $('.focus-region').mouseover(function(){ iso = $(this).prop('id'); fregion = {}; fregion[iso] = focusRegion; $('#vmap').vectorMap('set', 'colors', fregion); }); $('.focus-region').mouseout(function(){ c = $(this).attr('href'); cl = (c === '#')?colorRegion:c; iso = $(this).prop('id'); fregion = {}; fregion[iso] = cl; $('#vmap').vectorMap('set', 'colors', fregion); }); ///// var data_obj = { }; colorRegion = '#1076C8'; // Цвет всех регионов focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов highlighted_states = {}; // Массив подсвечиваемых регионов, указанных в массиве data_obj for(iso in data_obj){ highlighted_states[iso] = selectRegion; } $(document).ready(function() { $('#vmap1').vectorMap({ map: 'ukraine', backgroundColor: '#ffffff', borderColor: '#ffffff', borderWidth: 2, color: colorRegion, colors: highlighted_states, hoverOpacity: 0.7, enableZoom: true, showTooltip: true, // Отображаем объекты если они есть onLabelShow: function(event, label, code){ name = '<strong>'+label.text()+'</strong><br>'; if(data_obj[code]){ list_obj = '<ul>'; for(ob in data_obj[code]){ list_obj += '<li>'+data_obj[code][ob]+'</li>'; } list_obj += '</ul>'; }else{ list_obj = ''; } label.html(name + list_obj); list_obj = ''; }, // Клик по региону onRegionClick: function(element, code, region){ alert(region+' - ' +code); } }); }); // Выводим список объектов из массива $(document).ready(function() { for(region in data_obj){ for(obj in data_obj[region]){ $('.list-object').append('<li><a href="'+selectRegion+'" id="'+region+'" class="focus-region">'+data_obj[region][obj]+' ('+region+')</a></li>'); } } }); // Подсветка регионов при наведении на объекты $(function(){ $('.focus-region').mouseover(function(){ iso = $(this).prop('id'); fregion = {}; fregion[iso] = focusRegion; $('#vmap1').vectorMap('set', 'colors', fregion); }); $('.focus-region').mouseout(function(){ c = $(this).attr('href'); cl = (c === '#')?colorRegion:c; iso = $(this).prop('id'); fregion = {}; fregion[iso] = cl; $('#vmap1').vectorMap('set', 'colors', fregion); }); ///// var data_obj = { }; colorRegion = '#1076C8'; // Цвет всех регионов focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов highlighted_states = {}; // Массив подсвечиваемых регионов, указанных в массиве data_obj for(iso in data_obj){ highlighted_states[iso] = selectRegion; } $(document).ready(function() { $('#vmap2').vectorMap({ map: 'ukraine', backgroundColor: '#ffffff', borderColor: '#ffffff', borderWidth: 2, color: colorRegion, colors: highlighted_states, hoverOpacity: 0.7, enableZoom: true, showTooltip: true, // Отображаем объекты если они есть onLabelShow: function(event, label, code){ name = '<strong>'+label.text()+'</strong><br>'; if(data_obj[code]){ list_obj = '<ul>'; for(ob in data_obj[code]){ list_obj += '<li>'+data_obj[code][ob]+'</li>'; } list_obj += '</ul>'; }else{ list_obj = ''; } label.html(name + list_obj); list_obj = ''; }, // Клик по региону onRegionClick: function(element, code, region){ alert(region+' - ' +code); } }); }); // Выводим список объектов из массива $(document).ready(function() { for(region in data_obj){ for(obj in data_obj[region]){ $('.list-object').append('<li><a href="'+selectRegion+'" id="'+region+'" class="focus-region">'+data_obj[region][obj]+' ('+region+')</a></li>'); } } }); // Подсветка регионов при наведении на объекты $(function(){ $('.focus-region').mouseover(function(){ iso = $(this).prop('id'); fregion = {}; fregion[iso] = focusRegion; $('#vmap2').vectorMap('set', 'colors', fregion); }); $('.focus-region').mouseout(function(){ c = $(this).attr('href'); cl = (c === '#')?colorRegion:c; iso = $(this).prop('id'); fregion = {}; fregion[iso] = cl; $('#vmap2').vectorMap('set', 'colors', fregion); }); }); }); }); </script> </head> <body> <div id="vmap" style="width: 800px; height: 500px;"></div> <div id="vmap1" style="width: 800px; height: 500px;"></div> <div id="vmap2" style="width: 800px; height: 500px;"></div> </body> </html> Помогите сделать активный выпадающий список? Когда жмешь на Регион1 выпадала первая карта жмешь на регион2 вторая карта а предыдущая чтоб закрывалась |
Код нужно форматировать иначе его смотреть не будут. Зачем показывать:
$sql=mysqli_query($conexion,"SELECT * FROM `apelyatsia` WHERE `subject`=2 ;"); while($row = mysqli_fetch_assoc($sql)){ printf("'%d':['Апеляцій:%d'],",$row["obl"],$row["ap"]); По этой части только одно - зачем здесь printf? |
printf выводит данные с базы
|
Цитата:
Вместо кода РНР, лучше показать тогда результат вывода из базы, догадываться что там у вас выводится сервером не возможно. Форматируйте код если хотите чтобы получить ответ - вверху формы кнопки соответствующие. |
Отформатировал. Подскажи как сделать выпадающий список?
|
Цитата:
Цитата:
|
да, выпадающий. Когда жмешь на Регион1 выпадала первая карта жмешь на регион2 вторая карта а предыдущая чтоб закрывалась
|
Цитата:
|
<select class="color">
<option value="0">Регіон1</option> <option value="1">Регіон2</option> <option value="2">Регіон3</option> </select> вот так. Когда жмешь на Регион1 появлялась первая карта жмешь на регион2 вторая карта а предыдущая чтоб закрывалась |
Значит просто показать, причем тут "выпадала"?
В $(function(){}), что также есть $(document).ready(function() {}), и что достаточно прописать один раз, а не для каждого обработчика как у вас, пропишите: $('select.color').change(function() { $('#maps > div').hide(); //скрыть неактивную $('#vmap'+this.value).show() //показать активную }); Заменив значение первой опции списка с value="0" на value="", или изменив id бокса первой карты на vmap0. Все три бокса карты поместить в div id="maps", либо всем трем картам одно имя класса по которому скрывать неактивную. Можно и запоминать выбор в списке и прятать предыдущий выбор. Стили бокса карт по умолчанию - скрыты, сервером или js при загрузке страницы показывая первый из них. |
Часовой пояс GMT +3, время: 20:37. |