Как поправить выбор в select?
Привет всем.
http://jsfiddle.net/wms3dgam Нужно, чтобы, когда я нажал на значение оно поместилось вместо слова "Район" и скрывался список(можно посмотреть как он скрывается, если кликнем вне блока). Как еще сделать прокрутку, если я хочу показать 6-8 элементов?И, как сделать, чтобы значение, у которого длина больше чем ширина помещалось ЗА "якорек"? Вот пример как работает с обычным селектом - http://prntscr.com/7zngxz Заранее извиняюсь, если невнятно написал. |
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>
|
рони, благодарю за помощь!
|
| Часовой пояс GMT +3, время: 15:01. |