Форум

Павел Турченко · #1 (**permalink**) 15.12.2015, 18:13

Доброго вечера! Есть вот такое задание у меня https://yadi.sk/i/2RfvuKcUmFF4t - надо сделать вот такой select, в интернете подходящий скрипт на кастомизацию не нашел, может даже этот блок и не select-ом делается, но не знаю как. Надо что бы по выбору года, этот год отображался вместо текста "год выпуска", и при возможности повторно выбрать другой год(насколько знаю так работает только тег Select). Подскажите плагин какой, либо как реализовать. Заранее спасибо

tsigel · #2 (**permalink**) 15.12.2015, 18:24

Павел Турченко,
Учить js и задавать вопрос точнее. Не думаю что есть готовый плагин на то что вы хотите.

Павел Турченко · #3 (**permalink**) 15.12.2015, 18:37

Нужно изменять тег select или делать просто блоками и ссылками с заменой исходного текста?
И разве никто ранее не реализовывал такие меню?

tsigel · #4 (**permalink**) 15.12.2015, 18:42

Сообщение от Павел Турченко

Нужно изменять тег select или делать просто блоками и ссылками с заменой исходного текста?

Второе больше подходит. Делайте тестовый пример, выкладывайте свои попытки.

Павел Турченко · #5 (**permalink**) 15.12.2015, 19:02

<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");			
	});
})

Вроде все работает, если можно как-то улучшить, говорите, буду рад.

рони · #6 (**permalink**) 15.12.2015, 19:41

Павел Турченко,
вариант...

<!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>

Павел Турченко · #7 (**permalink**) 15.12.2015, 19:57

рони,
Спасибо, так действительно проще

рони · #8 (**permalink**) 15.12.2015, 20:09

Павел Турченко,
можно добавить сброс при повторном выборе того же года

слегка изменив строку 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>

Форум

Справочник

Discord чат

Курсы javascript