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

246

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>