как в alert вывести значения dropdown?

212
10 октября 2017, 05:59

bootstrap, в dropdown выбираются элементы, страна, дата, тип визы, после этого по нажатию кнопки подобрать нужно вывести все эти значения в alert. Как это можно сделать?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
 
<body> 
 
  <form method="post" target="area"> 
    <div class="btn-group"> 
      <div class="btn-group"> 
        <button class="btn btn-info dropdown-toggle" type="button" id="type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
            Тип 
            <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="type"> 
          <li><a href="#" data-value="action">Волонтерская</a></li> 
          <li><a href="#" data-value="another action">Туристическая</a></li> 
          <li><a href="#" data-value="something else here">Бизнес</a></li> 
        </ul> 
      </div> 
      <div class="btn-group"> 
        <button class="btn btn-info dropdown-toggle" type="button" id="country" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
            Страна 
            <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="country"> 
          <li><a href="#" data-value="action">Россия</a></li> 
          <li><a href="#" data-value="another action">Албания</a></li> 
          <li><a href="#" data-value="something else here">Алжир</a></li> 
        </ul> 
      </div> 
      <div class="btn-group"> 
        <input id="meeting1" type="date" value="2011-01-13" class="btn btn-info " /> 
      </div> 
 
      <div class="btn-group"> 
        <input type="submit" class="btn btn-warning" name="submit" value="Подобрать" /> 
      </div> 
    </div> 
 
 
 
 
  </form> 
  <script src="vendor/jquery/jquery.min.js"></script> 
  <script src="vendor/popper/popper.min.js"></script> 
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script> 
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script> 
  <script src="js/asc.min.js"></script> 
 
  <script> 
    $(".dropdown-menu li a").click(function() { 
      $($(this).parents(".btn-group")[0]).find('.btn').html($(this).text() + ' <span class="caret"></span>'); 
      $($(this).parents(".btn-group")[0]).find('.btn').val($(this).data('value')); 
    }); 
  </script> 
 
</body> 
 
</html>

READ ALSO
Таблицы в веб приложении [требует правки]

Таблицы в веб приложении [требует правки]

Хочу сделать страничку где пользователи будут работать с таблицей, добавлять строки, удалять строки, редактировать ячейкиЕсть ли для этого...

160
Как определить, произойдет ли у элемента css transition? Метод стандартной библиотеки или алгоритм

Как определить, произойдет ли у элемента css transition? Метод стандартной библиотеки или алгоритм

Необходимо удалить элемент со страницыСейчас на этот элемент навешивается обработчик события transitionend, коллбэк которого (удаление элемента)...

201
Корректные модальные окна для мобилок

Корректные модальные окна для мобилок

Подскажите плагин модального окна для мобильных устройств на js, который:

175
Не могу понять как решить задачу в javascript

Не могу понять как решить задачу в javascript

В книге Моргана Ника имеется задача в конце главы об объектах

681