Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2017, 16:22
Интересующийся
Отправить личное сообщение для failoflife Посмотреть профиль Найти все сообщения от failoflife
 
Регистрация: 04.04.2016
Сообщений: 14

Показать div(ы) на JQuery
По нажатию на input должен добавиться div-контейнер, в котором должны добавятся div с городами из массива.

Див, то добавляется, а дивы внутри него с городами - нет.
Как можно это реализовать?

И еще хотелось бы скрыть див-контейнер, когда на него не нажимают.

Для удобства сделала это на этом сервисе:
https://jsfiddle.net/x2xpo28j/
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2017, 16:39
Интересующийся
Отправить личное сообщение для failoflife Посмотреть профиль Найти все сообщения от failoflife
 
Регистрация: 04.04.2016
Сообщений: 14

Так смогла нарисовать, но как скрыть, а лучше вообще удалить блок(с классом list), когда на него не нажимаем?
https://jsfiddle.net/x2xpo28j/1/

Последний раз редактировалось failoflife, 18.02.2017 в 16:44.
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2017, 16:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от failoflife
а дивы внутри него с городами - нет.
так нет в коде никакого добавления, в чём проблема, если 1 div смогли добавить? идите о массиву и добавляйте.
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2017, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от failoflife
но как скрыть,
почти готовый пример
Как сделать простой select?
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2017, 17:17
Интересующийся
Отправить личное сообщение для failoflife Посмотреть профиль Найти все сообщения от failoflife
 
Регистрация: 04.04.2016
Сообщений: 14

Сообщение от рони Посмотреть сообщение
почти готовый пример
Как сделать простой select?
Сделала намного проще - https://jsfiddle.net/x2xpo28j/2/
Но, когда нажимаю много раз то он создает и создает блоки с контейнером. А можно, чтоб только по одному клику он создавал?
Ответить с цитированием
  #6 (permalink)  
Старый 18.02.2017, 17:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

failoflife,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .input {
  padding: 7px;
}

.list {
    display: block;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 12px #9B9B9B;
    top: 39px;
    width: 339px;
    border: 1px solid #9B9B9B;
    overflow-y: scroll;
}

.container {
  position: relative;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var city = ['Киев', 'Новосибирск', 'Санкт-Петербург', 'Рига', 'Токио', 'Москва'];
    var sel;

    $(".input").on("click", function(event) {
        if (!sel) {
            var self = this;
            sel = $('<div class="list"></div>').insertAfter(self);
            sel.on("click", ".item", function() {
                self.value = this.innerHTML;
                sel.slideUp()
            })
            $.each(city, function(indx, text) {
                $("<div/>", {
                    "class": "item",
                    text: text
                }).appendTo(sel)
            });
        $(document).click(function(event) {
        if (!$(event.target).closest(".list, .input").length) sel.slideUp()
        })
        }
        sel.slideDown()
    }).on("input", function() {
        sel.slideUp()
    });


});
  </script>
</head>

<body>
<div class="container">
    <input class="input" type="text" placeholder="Кликните для выбора">
</div>

</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 18.02.2017, 17:39
Интересующийся
Отправить личное сообщение для failoflife Посмотреть профиль Найти все сообщения от failoflife
 
Регистрация: 04.04.2016
Сообщений: 14

рони, Спасиииииибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Работа для знатока jQuery virtualbrest Работа 0 24.07.2013 16:05
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08