0 / 0 / 0
Регистрация: 10.03.2011
Сообщений: 13
1

Ошибка в код - добавления блока с выпадающими списками

25.06.2011, 19:33. Показов 1011. Ответов 9
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день, пытаюсь написать код, но пока никак не получается, уже не знаю как быть... сам я новичок, поэтому очень надеюсь на вашу помощь. Если есть у кого соображения, поделитесь...
Суть вот в чем:
На вложенном рисунке я показал чего хочу добиться.
Есть два выпадающих списка и кнопка "add". При нажатии на неё в низу должно появляться точно такое же, но с кнопкой "del" и так 10 штук и соответственно при нажатии этой кнопки списки выпадающий должны исчезать.
И все это находится в тегах <table></table>. Слева от списков находятся названия их. (на рисунке не показана)
вот что я сам написал, но ничего не работает.
Javascript
1
2
3
4
5
6
7
8
9
10
$(function(){
$('.add').click(function(){
$('boxLevel').show();   
});
$(function(){
$('.del').click(function(){
$('boxLevel').hide();   
}); 
}); 
});
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="boxLevel">
<select name="name" id="name"">
<option value="1">1</option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
-
 <select name="family" id="family">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<span class="add"><a href="">add</a></span>
</div>
Изображения
 
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.06.2011, 19:33
Ответы с готовыми решениями:

работа с выпадающими списками.
Везде примеры с использованием JavaScript. А здесь есть пример с Value, но HTML. А у меня список...

Сортировка выпадающими списками
Я новичок, хочу своими руками реализовать следующее: Есть 10 страниц, к примеру, названные: 1,...

Форма с выпадающими списками
Есть выпадающий список и кнопка. Хочу, чтоб при выбранном значении в списке и при нажатии кнопки...

Непонятная ситуация с выпадающими списками
Программно создаю N количество в разных ячейках одного столбца выпадающие списки, вот код одного из...

9
36 / 36 / 3
Регистрация: 24.06.2011
Сообщений: 50
26.06.2011, 14:34 2
Попробуй так:
Javascript
1
2
3
4
5
6
7
8
$('.add').click(function(){
    $('boxLevel').show();
    return false;
});
$('.del').click(function(){
    $('boxLevel').hide();   
    return false;
});
1
0 / 0 / 0
Регистрация: 10.03.2011
Сообщений: 13
26.06.2011, 15:19  [ТС] 3
С этим кодом я разобрался, но... при нажатии "add" у меня добавлят сразу столько строк, сколько изначально было написано в html'е и спрятано, путем CSS ( "display:none" ).
А как сделать, чтобы при каждом нажатии добавлялась только одна строчка... ? Нужно прописывать какое-то условие?
Или может быть можно уже найти готовые варианты, похожих кодов ?
0
36 / 36 / 3
Регистрация: 24.06.2011
Сообщений: 50
26.06.2011, 18:46 4
Можно делать вставку:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Обрати внимание: boxLevel — это класс, а не идентификатор, т.к. их(boxLevel'ов) может быть множество
row = $('<div class="boxLevel">
  <select name="name" id="name"">
  бла-бла-бла
  <span class="delete"><a href="">delete</a></span>
  </div>');
  
row.find('.delete').click(function(){
  $(this).closest('.boxLevel').remove();
  return false;
});
 
$('.add').click(function(){
  $(<во что вставить>).append(row.clone());
  return false;
});
p.s: Код не проверял. Даже на синтаксическую валидность...
1
0 / 0 / 0
Регистрация: 10.03.2011
Сообщений: 13
27.06.2011, 01:07  [ТС] 5
Цитата Сообщение от n4r.c0m Посмотреть сообщение
$(<во что вставить>).append(row.clone());
а там достаточно будит указать <td></td>? У меня все эта конструкция находится в таблице. У меня не работает ничего.
0
36 / 36 / 3
Регистрация: 24.06.2011
Сообщений: 50
27.06.2011, 03:08 6
Нужно указывать селектор. Допустим у тебя:
HTML5
1
2
3
4
5
6
<table class="sometable">
    <tr>
        <td></td>
        <td class="elements-con"><!--Здесь буду элементы--></td>
    </tr>
</table>
Нужно будет вызывать $('.sometable .elements-con').append(...)
1
36 / 36 / 3
Регистрация: 24.06.2011
Сообщений: 50
27.06.2011, 03:08 7
Нужно указывать селектор. Допустим у тебя:
HTML5
1
2
3
4
5
6
<table class="sometable">
    <tr>
        <td></td>
        <td class="elements-con"><!--Здесь буду элементы--></td>
    </tr>
</table>
Нужно будет вызывать $('.sometable .elements-con').append(...)
1
0 / 0 / 0
Регистрация: 10.03.2011
Сообщений: 13
29.06.2011, 01:47  [ТС] 8
Спасибо, работает!
А можно сделать, что бы "delete" убирал только выпадающий список, что напротив, а не все?
0
36 / 36 / 3
Регистрация: 24.06.2011
Сообщений: 50
29.06.2011, 01:55 9
Так и должно быть
Javascript
1
2
3
4
row.find('.delete').click(function(){
  $(this).closest('.boxLevel').remove(); //Ищем ближайшего "родителя" с классом .boxLevel и удаляем его.
  return false;
});
2
0 / 0 / 0
Регистрация: 10.03.2011
Сообщений: 13
29.06.2011, 23:55  [ТС] 10
вот и я думал, что так и должно быть, но все равно убирает все. А в чем вообще может быть причина, я поищу.
Спасибо тебе больше за помощь!

Добавлено через 21 час 25 минут
А все, проблему решил! Нужно было убрать "href"!
0
29.06.2011, 23:55
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.06.2011, 23:55
Помогаю со студенческими работами здесь

Разделенная форма с выпадающими списками
В Access есть функционал &quot;Разделенная форма&quot;, которой в принципе достаточно, но нужно еще добавить...

Как работать с выпадающими списками
Добрый день! Прошу помочь со следующим кодом. Есть книга, что-то типа формирования сметы на...

Проблемы с каскадными выпадающими списками
Доброго времени суток, я новичок в программировании на ASP, поэтому возникает куча вопросов Я...

Трабл с выпадающими списками в php
Здравствуйте! Программирую всего неделю. В процессе создания таблицы со списком добавленных товаров...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru