Не выводятся данные из базы данных в ссылку, кроме самой первой
Я пытаюсь вывести запись из базы данных в форму. У меня в форме имеется 3 выпадающих списка. Это дивы со ссылкой и списком. При нажатии на ссылку открывается выпадашка. И вот я в ссылку хочу вывести данные по запросу из бд. В ссылку в первом таком выпадающем списке выводится все хорошо, а вот в последующие ссылки данные уже не выводятся.
Если я поменяю местами эти списки со ссылками, то работать будет все равно только первый. В ссылку в любом последующем списке ничего не выводится.
С SQL запросом все в порядке, уже проверено. Но не могу понять почему возникает такая проблема с последующими ссылками. В чем может быть дело?
echo ' <label class="label">Select Category</label>';
echo ' <div class="select">';
echo '<a href="javascript:void(0);" class="slct">'.$row['categoryName'].'</a>';
echo '<ul class="drop" >';
include ('../dbselectoptionsCategory.php');
echo '</ul>';
echo '<input type="hidden" id="select" name = "category">';
echo '</div>';
echo ' <label class="label">Select Container</label>';
echo ' <div class="select">';
//в ссылку ниже данные уже не выводятся
echo '<a href="javascript:void(0);" class="slct">'.$row['containerName'].'</a>';
//
echo '<ul class="drop" >';
include ('../dbselectoptionsContainer.php');
echo '</ul>';
echo '<input type="hidden" id="select" name = "container">';
echo '</div>';
Стили:
.select {
margin: 0 10px 15px 0;
}
.slct {
display: block;
background: #fff;
border: 1px solid #E7EAEE;
border-radius: 4px;
max-width: 200px;
padding: 8px 12px;
color: #64748B;
font-weight: 400;
font-size: 14px;
line-height: 19px;
background-position: 290px -145px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.slct.active {
border-radius: 5px 5px 0 0;
border-bottom: none;
}
Скрипт для выпадающего списка:
$('.slct').click(function(){
/* Заносим выпадающий список в переменную */
var dropBlock = $(this).parent().find('.drop');
/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
if( dropBlock.is(':hidden') ) {
dropBlock.slideDown();
/* Выделяем ссылку открывающую select */
$(this).addClass('active');
/* Работаем с событием клика по элементам выпадающего списка */
$('.drop').find('li').click(function(){
/* Заносим в переменную HTML код элемента
списка по которому кликнули */
var selectResult = $(this).html();
/* Находим наш скрытый инпут и передаем в него
значение из переменной selectResult */
$(this).parent().parent().find('input').val(selectResult);
/* Передаем значение переменной selectResult в ссылку которая
открывает наш выпадающий список и удаляем активность */
$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
/* Скрываем выпадающий блок */
dropBlock.slideUp();
});
/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
} else {
$(this).removeClass('active');
dropBlock.slideUp();
}
/* Предотвращаем обычное поведение ссылки при клике */
return false;
});