I need to impose a beautiful dropdown that is in shape, but standard select is hard to stylize, it is much more convenient to do through ul li . How then can I send data to the server from a dropdown built on ul li ?

5 answers 5

Option 1 data attributes

 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>

Option 2 is the dom element property.

 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>

Here the key difference is that it is not the data attribute that is set, but the property of the $block.get(0).val = selectObj[i].id; and accordingly the sample will be $(this).get(0).val

Well, having a selected request is sent as usual Ajax

    In the li elements, you can add the data-val attribute which will contain the value for the element. When selecting an item in the drop-down list, add an attribute to the selected li , let's say selected .

    After that you can send data to the server using javascript , as an ajax request with form data.

    Since you are using Bootstrap, you can easily get the selected item from the drop-down list using jQuery, for example: $('ul > li[selected]').attr('data-val');

    Accordingly, using jQuery, you can send an ajax request using the $ .ajax () or $ .post () function

      If the submission is without js, then wrap the list in a form, in li, wrap the input, submit.

        I agree with the answers above, but I would also like to clarify.

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

          Make a normal select, which will be a copy of the custom, transfer the selected value there, send data to the server as usual.

           $(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>