Отправка данных из dropdown меню

383

26 февраля 2017, 07:30

Мне нужно сверстать красивый dropdown который находится в форме, но стандартный select тяжело поддается стилизации, намного удобно через ul li сделать. Как потом мне отправлять данные на сервер из dropdown построенном на ul li?

Answer 1

Вариант 1 data атрибутами

var selected; 
 
$('.dropdown-menu li a').on('click', function () { 
   selected = { 
     id:$(this).data('id'), 
     text: $(this).text() 
   } 
   console.log(selected); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
<div class="dropdown"> 
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
  </button> 
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#" data-id="one">Один</a></li> 
    <li><a href="#" data-id="two">Два</a></li> 
    <li><a href="#" data-id="three">Три</a></li> 
 
  </ul> 
</div>

Вариант 2 свойствами dom элемента.

selectObj = [ 
 {id:'one', text: 'Один'}, 
 {id:'two', text: 'Два'}, 
 {id:'three', text: 'Три'}, 
] 
 
 
 
$(document).ready(defaultInit); 
 
function defaultInit() { 
 
   for(var i = 0; i < selectObj.length; i++){ 
     $block = getBlock(); 
     $block.get(0).val = selectObj[i].id; 
     $block.find('a').text(selectObj[i].text); 
     $('.dropdown-menu').append($block) 
  } 
   
   $('body').on('click','.dropdown-menu li', function () { 
       selected = { 
         id:$(this).get(0).val, 
         text: $(this).text() 
       } 
       console.log(selected); 
    }) 
   
} 
function getBlock() { 
  return $('<li/>').append($('<a/>')); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
<div class="dropdown"> 
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
  </button> 
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     
  </ul> 
</div>

Тут ключевое отличие в том что задаётся не data атрибут, а свойство элемента $block.get(0).val = selectObj[i].id; и соответственно выборка будет $(this).get(0).val

Ну а имея selected запрос отправляется обычным аяксом

Answer 2

В элементы li можно добавить атрибут data-val в котором будет содержаться значение для элемента. При выборе элемента выпадающего списка добавлять к выбранному li атрибут, допустим selected.

После чего отправлять данные на сервер можно при помощи javascript, в качестве ajax запроса с данными формы.

Поскольку вы используете Bootstrap получить выбранный элемент из выпадающего списка можно легко при помощи jQuery, к примеру: $('ul > li[selected]').attr('data-val');

Соответственно при помощи jQuery можете отправлять ajax запрос используя функцию $.ajax() или $.post()

Answer 3

Если сабмит без js, то оборачивайте список в форму, в li заворачивайте input, сабмитьте.

Answer 4

Солидарен с ответами выше, но еще бы хотел уточнить.

    $( "#Form" ).submit(function( event ) {
        event.preventDefault(); // Функция которая отменяет submit и страница не перезагружается
        // Тут с помощью jquery создаете select но делаете его multiple, и все данные которые вы выбирите - append делаете в селект.
    });

Answer 5

Сделать обычный селект, который будет копией кастомного, передавать выбранное значение туда, отправлять на сервер данные как обычно.

$(function(){ 
  var i; 
   
  $('ul li').click(function() { 
    i = $(this).index(); 
     
    $('select option').prop('selected', false).eq(i).prop('selected', true) 
  }); 
});

li { cursor: default; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li>option 1 
  <li>option 2 
  <li>option 3 
</ul> 
 
<select> 
  <option>option 1 
  <option>option 2 
  <option>option 3 
</select>