Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2015, 22:35
Аспирант
Отправить личное сообщение для makalet Посмотреть профиль Найти все сообщения от makalet
 
Регистрация: 25.05.2015
Сообщений: 76

Как поправить выбор в select?
Привет всем.
http://jsfiddle.net/wms3dgam
Нужно, чтобы, когда я нажал на значение оно поместилось вместо слова "Район" и скрывался список(можно посмотреть как он скрывается, если кликнем вне блока). Как еще сделать прокрутку, если я хочу показать 6-8 элементов?И, как сделать, чтобы значение, у которого длина больше чем ширина помещалось ЗА "якорек"? Вот пример как работает с обычным селектом - http://prntscr.com/7zngxz
Заранее извиняюсь, если невнятно написал.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2015, 23:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

makalet,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
    .prices { width: 140px;  margin: 0px 10px; background: #fff; border: 1px solid #C8B5A1; cursor: default; z-index: 9999;position: relative; font-size: 13px;}
.prices label{vertical-align: text-top}
.prices ul li:hover{background-color: #3696E9; color: #FFFFFF;}
.prices ul { height: 50px;display:none; position:absolute; list-style: none;padding: 4px 0px;width:170px; margin:0px -1px -1px; border: 1px solid #C8B5A1;  overflow-y: scroll; background:none 0% 0% repeat scroll rgb(255, 255, 255);}
.open:after {background: url(http://s018.radikal.ru/i522/1508/81/84e20b4a3468.png) no-repeat left; height: 10px; width: 10px;   margin-left: 10px  ;   display: block; cursor:default;  content: "";  right :0;top: 0; position: absolute;}
.open {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

</style>
<script>
$(function() {
    var $ul = $("ul");
    $(document).on("click", function(event) {
        var $target = $(event.target),
            $parent = $target.parents(".prices");
        if ($parent.length) {
            $("ul", $parent).slideToggle();
            if ($target.is("li")) $(".open", $parent).contents()[0].data = $target.text()
        } else $ul.slideUp()
    })
});
</script>
</head>
<body>
  <div class="prices">
	<div class="open">Район</div>
	<ul class="list">
        <li>Тестовый район имени222</li>
        <li>Тестовый район имени222</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
    </ul>
</div>
 </body>


</html>

Последний раз редактировалось рони, 01.08.2015 в 23:53.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2015, 13:52
Аспирант
Отправить личное сообщение для makalet Посмотреть профиль Найти все сообщения от makalet
 
Регистрация: 25.05.2015
Сообщений: 76

рони, благодарю за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
html select быстрый выбор kristow Javascript под браузер 3 01.08.2016 15:12
Как сохранить выбор в select user_name Общие вопросы Javascript 12 02.04.2015 09:37
Имитировать выбор в списке select cha0s jQuery 1 27.03.2014 19:43
Как поправить расположение элементов appendChild()? gudron Events/DOM/Window 1 17.10.2013 08:14
Как вывести на экран значение функции SELECT MAX(id) Владдд Серверные языки и технологии 3 25.01.2009 16:07