Javascript-форум - Выпадающий список по клику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выпадающий список по клику (https://javascript.ru/forum/misc/59049-vypadayushhijj-spisok-po-kliku.html)

Выпадающий список по клику

Добрый день!

Делаю сайт, в котором есть несколько выпадающих списков в хедере:
1. список с выбором языка;
2. список с выбором валюты (денежной единицы отображения стоимости товара);
3. список с выбором телефона службы поддержки, в зависимости от региона/города/страны;

Все списки выпадают по клику. Вариантов верстки подобных списков в просторах интернета достаточно: от банального select (option) до создания обыкновенного ненумерованного списка ul>li и "прикручивания" к нему JS.

Вопрос в том как "правильно" делаются/верстаются подобные списки?

Цитата:

Сообщение от gorbuz9kin

Вопрос в том как "правильно" делаются/верстаются подобные списки?

если содержимое в вариантах выпадающего списка большое, то обычный <select> плоховат, ибо в нём нет встроенного переноса и его вроде бы нельзя никак добавить. Т.е. вот такое выглядит не очень:

<select name="" id="">
  <option value="pravo">Гражданское право — отрасль права, объединяющая правовые нормы, регулирующие имущественные, а также связанные и не связанные с ними личные неимущественные отношения, которые основаны на независимости оценки, имущественной самостоятельности и юридическом равенстве сторон, в целях создания наиболее благоприятных условий
  </option>
</select>

В остальных случаях выбирают select

ок. а как тогда варианту option прикрепить картинку/иконку, ссылку?

В общем, сделал через ul>li. подскажите как передать значение пункта li при клике на него в span class="title" ?
http://jsfiddle.net/gorbuz9kin/m7gxk5s4/

кастомизация селекта на js+ сворачивание по клику вне селекта

gorbuz9kin,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(img/flag_english_active.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(img/flag_russion.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(img/flag_ukraine.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') titleElem.innerHTML = elem.textContent;
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>

Спасибо огромное!
А если у каждого пункта li есть своя фоновая (background-image) картинка (в данном случае это флаг), как сделать так чтобы эта картинка "подтягивалась" в title при выборе определенного <li>

gorbuz9kin,
добавить class или data в ссылку и добавить в строку 87 изменение класса или стиля

gorbuz9kin,

<li><a href="#"  data-img="img/flag_english_active.png">English</a></li>

if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            var url = elem.dataset.img;
            titleElem.style.backgroundImage = 'url('+url+')'
          }

gorbuz9kin,
или просто взять стиль backgroundImage из самой ссылки

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/russia-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/ukraine-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            titleElem.style.backgroundImage =  getComputedStyle(elem, null)['backgroundImage']
          }
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>