Кастомизированный select
Доброго вечера! Есть вот такое задание у меня https://yadi.sk/i/2RfvuKcUmFF4t - надо сделать вот такой select, в интернете подходящий скрипт на кастомизацию не нашел, может даже этот блок и не select-ом делается, но не знаю как. Надо что бы по выбору года, этот год отображался вместо текста "год выпуска", и при возможности повторно выбрать другой год(насколько знаю так работает только тег Select). Подскажите плагин какой, либо как реализовать. Заранее спасибо
|
Павел Турченко,
Учить js и задавать вопрос точнее. Не думаю что есть готовый плагин на то что вы хотите. |
Нужно изменять тег select или делать просто блоками и ссылками с заменой исходного текста?
И разве никто ранее не реализовывал такие меню? |
Цитата:
|
<a href="#" class="btn btn-default dropdown-toggle btn_grey" id="year_link">Год выпуска </a>
<div class="div_dropdown year_div">
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">1999</a>
</div>
$(document).ready(function(){
$("#year_link").click(function(){
$(".year_div").css("display", "block");
});
$(".year_dropdown").click(function(){
var a = $(this).text();
$("#year_link").text(a);
$(".year_div").css("display", "none");
});
})
Вроде все работает, если можно как-то улучшить, говорите, буду рад. |
Павел Турченко,
вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.year_div{
display: none;
}
.red{
background-color: #FF0000;
color: #FFFFFF;
padding: 2px 5px;
border-radius: 4px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var b = $(".year_div"),
c = $("#year_link"),
d = $(".year_dropdown",b);
c.add(b).click(function(a) {
a.preventDefault();
a = $(a.target);
a.is(d) && c.text(a.text()) && d.not(a.addClass('red')).removeClass('red');
b.slideToggle()
})
});
</script>
</head>
<body>
<a href="#" class="btn btn-default dropdown-toggle btn_grey" id="year_link">Год выпуска </a>
<div class="div_dropdown year_div">
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">2000</a>
<a href="#" class="year_dropdown">2001</a>
<a href="#" class="year_dropdown">2002</a>
<a href="#" class="year_dropdown">2003</a>
<a href="#" class="year_dropdown">2004</a>
</div>
</body>
</html>
|
рони,
Спасибо, так действительно проще :) |
Павел Турченко,
можно добавить сброс при повторном выборе того же года :) слегка изменив строку 29
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.year_div{
display: none;
}
.red{
background-color: #FF0000;
color: #FFFFFF;
padding: 2px 5px;
border-radius: 4px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var b = $(".year_div"),
c = $("#year_link"),
d = $(".year_dropdown",b);
c.add(b).click(function(a) {
a.preventDefault();
a = $(a.target);
a.is(d) && c.text(a.is('.red')? 'Год выпуска': a.text()) && d.not(a.toggleClass('red')).removeClass('red');
b.slideToggle()
})
});
</script>
</head>
<body>
<a href="#" class="btn btn-default dropdown-toggle btn_grey" id="year_link">Год выпуска </a>
<div class="div_dropdown year_div">
<a href="#" class="year_dropdown">1999</a>
<a href="#" class="year_dropdown">2000</a>
<a href="#" class="year_dropdown">2001</a>
<a href="#" class="year_dropdown">2002</a>
<a href="#" class="year_dropdown">2003</a>
<a href="#" class="year_dropdown">2004</a>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:40. |