Список при нажатии на инпут

@Gil · Регистрация: 29.10.2012

Студворк — интернет-сервис помощи студентам

Доброго всем времени суток, в общем бьюсь с проблемой уже не первый день, может кто поможет.
В общем есть электронный журнал, табличка - студенты-даты и внутри оценки. Нужно при нажатии на инпут (который является полем для проставления оценки, их соответственно очень много) выводить окошечко со списком возможных вариантов (4,3,5 и т.д.) Некоторые куски кода:

HTML5
1
2
3
4
5
6
7
8
<input id=\"mark\" title=\"".$row_stud['name']." ".$row_stud['surname']."\" type=\"text\" name=\"mark[".$j."][".$i."]\" value=\"".$mark."\">
 
<ul id=\"list\" style=\"display:none; overflow:auto;">
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
</ul>​

- в цикле создаются поля, значения которых потом передаются для записи в бд

И сама функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
 
var tags = ["5",
"4",
"3",
"2"];
 
$('#mark').focus(function(){
    $('#list').css({ "display":"block" });
}).keyup(function(){
    $('#list').css({ "display":"none" });
});
$('#list li').click(function(){
    $('#mark').val($(this).text());
    $('#list').css({ "display":"none" });
}); 
        $( "#mark" ).autocomplete({
            source: tags
        });
    });

Поле вылезает только в первом инпуте, что и логично впринципе... как можно решить данную проблему? никто не сталкивался? я чувствую что можно тут вообще обойтись без jquery

Добавлено через 21 минуту
вот как выглядит окно

@SimbaRu · 29.10.2012, 20:10

особо в задачу не вдумывался, но, навскидку:
1. вместо айдишника использовать класс, то бишь $('.mark'), т.о. всплывать нужный блок будет на всех инпутах упомянутого класса;
2. для получения атрибутов, свойств и прочего по нажатому инпуту далее использовать $(this).

как то так

@Gil · 29.10.2012, 20:54 **[ТС]**

извиняюсь, немного не понял про пункт 2, класс я пробовал, тогда применяется ко всем инпутам, но при нажатии значение так же присваивается всем...

Добавлено через 23 минуты
грубо говоря необходимо разделить инпуты как-то, не могу сообразить.... в данном случае они все как одно целое

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
#list {
    display: none;
    height: 100px;
    width: 100px;
    position: fixed;
}​
</style>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
        <script>
    $(function(i) {
    $('.tdd').focus(function(){
    $('#list').show()
})
$('#list li').click(function(){
       
    $('.tdd').val( $(this).text() )
    $('#list').hide()        
})   
    });
    </script>
<input type="text" class="tdd" value="Кликни сюда1">
<input type="text" class="tdd" value="Кликни сюда2">
<input type="text" class="tdd" value="Кликни сюда3">
  <ul id="list">
 <li>first</li>
 <li>second</li>
 <li>other</li>
 </ul>

@newJS · 29.10.2012, 21:14

как таблица сделана, куда инпуты втыкать?
и про окошко не понял, что за окошко?

@kalabuni · 30.10.2012, 01:38

на таблицу "повесьте" обработчик onclick="myFunc (event)"

JavaScript
1
2
3
4
5
6
7
8
9
10
function myFunc (ev)
{
var e = ev || window.event, obj = e.target || e.srcElement;
if (obj.tagName != 'INPUT') return;
// ну а здесь вместо какого-то самопального списка я бы предложил
// делать замену obj (который <INPUT>) на <SELECT> с пустым первым <OPTION>
// и при onchange для selectedIndex > 0 снова меняете <SELECT> на <INPUT>,
// но уже с выбранным value
// аналогично меняете <SELECT> на <INPUT>, но с пустым value при потере фокуса <SELECT>'ом
}

написать недолго и несложно...

только ведь вам обязательно надо на тарабарском (сиречь - на JQuery), а я его не знаю, увы

@Gil · 30.10.2012, 10:27 **[ТС]**

Сообщение от newJS

как таблица сделана, куда инпуты втыкать?
и про окошко не понял, что за окошко?

таблица генерируется автоматически, в зависимости от количества дней в месяце и кол-ва студентов, внутренние поля это и есть инпуты (там где на картинке стоят оценки)

окошко это скорее див со списком возможных вариантов, который бы становился видимым при нажатии на инпут

Добавлено через 12 минут

Сообщение от kalabuni

на таблицу "повесьте" обработчик onclick="myFunc (event)"

JavaScript
1
2
3
4
5
6
7
8
9
10
function myFunc (ev)
{
var e = ev || window.event, obj = e.target || e.srcElement;
if (obj.tagName != 'INPUT') return;
// ну а здесь вместо какого-то самопального списка я бы предложил
// делать замену obj (который <INPUT>) на <SELECT> с пустым первым <OPTION>
// и при onchange для selectedIndex > 0 снова меняете <SELECT> на <INPUT>,
// но уже с выбранным value
// аналогично меняете <SELECT> на <INPUT>, но с пустым value при потере фокуса <SELECT>'ом
}

написать недолго и несложно...

только ведь вам обязательно надо на тарабарском (сиречь - на JQuery), а я его не знаю, увы

интересно, спасибо, идею я понял

Новые блоги и статьи Все статьи Все блоги /
Функция установки текстового статуса в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .

@SimbaRu 10 / 10 / 5 Регистрация: 11.09.2012 Сообщений: 100
	29.10.2012, 20:10
	особо в задачу не вдумывался, но, навскидку: 1. вместо айдишника использовать класс, то бишь $('.mark'), т.о. всплывать нужный блок будет на всех инпутах упомянутого класса; 2. для получения атрибутов, свойств и прочего по нажатому инпуту далее использовать $(this). как то так 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	29.10.2012, 21:14
	как таблица сделана, куда инпуты втыкать? и про окошко не понял, что за окошко? 0