Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2015, 18:13
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Кастомизированный select
Доброго вечера! Есть вот такое задание у меня https://yadi.sk/i/2RfvuKcUmFF4t - надо сделать вот такой select, в интернете подходящий скрипт на кастомизацию не нашел, может даже этот блок и не select-ом делается, но не знаю как. Надо что бы по выбору года, этот год отображался вместо текста "год выпуска", и при возможности повторно выбрать другой год(насколько знаю так работает только тег Select). Подскажите плагин какой, либо как реализовать. Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2015, 18:24
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Павел Турченко,
Учить js и задавать вопрос точнее. Не думаю что есть готовый плагин на то что вы хотите.
Ответить с цитированием
  #3 (permalink)  
Старый 15.12.2015, 18:37
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Нужно изменять тег select или делать просто блоками и ссылками с заменой исходного текста?
И разве никто ранее не реализовывал такие меню?
Ответить с цитированием
  #4 (permalink)  
Старый 15.12.2015, 18:42
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Сообщение от Павел Турченко
Нужно изменять тег select или делать просто блоками и ссылками с заменой исходного текста?
Второе больше подходит. Делайте тестовый пример, выкладывайте свои попытки.
Ответить с цитированием
  #5 (permalink)  
Старый 15.12.2015, 19:02
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Павел Турченко,
вариант...
<!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
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

рони,
Спасибо, так действительно проще
Ответить с цитированием
  #8 (permalink)  
Старый 15.12.2015, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Павел Турченко,
можно добавить сброс при повторном выборе того же года слегка изменив строку 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>

Последний раз редактировалось рони, 15.12.2015 в 20:12.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка нескольких select на одинаковые значения emulexx Общие вопросы Javascript 6 07.04.2015 15:19
Select, optionl, и автоматический выбор Rorbi Элементы интерфейса 2 29.05.2014 15:38
SQL запрос. Как делать SELECT с условием SELECT Duda.Ml1986@gmail.com Серверные языки и технологии 16 13.01.2014 16:09
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31