Question

I am trying to make a dropdown menu that when you click dropdown a (in this case Item 3) the ul is showed and then when you click the li for example Item 2 it is posted and then Item 3 (the text between the a) would be replaced by item 2 and vice versa in the li. So far I have been unsuccessful in doing this. Any help would be greatly appreciated. This is what I have so far:

<div class="dropdown">
    <a href="#">Item 3</a>
    <ul data-id='<?php echo $row['_id'] ?>' data-url='<?php echo Uri::create('edit') ?>'>
        <li> Item 1 </li>
        <li> Item 2 </li>
        <li> Item 4 </li>
        <li> Item 5 </li>
        <li> Item 6 </li>
    </ul>
</div>



$('.dropdown a').click(function() {
    $(this).parent().children('ul').toggle();
    return false;
});


$('.dropdown li').click(function() {
    var url = $(this).parent().data('url'),
        id = $(this).parent().data('id'),
        status = $(this).text();

$.post(url, { status: status, id: id }, function() {

    });
});

Answer 1

Solution sorts the LI’s after the text change and slides the dropdown closed again

DEMO: http://jsfiddle.net/Ze7ej/

/* must delegate handler due to html change during sorting*/
$('.dropdown').on('click', 'li', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $link = $parent.prev(),
        url = $parent.data('url'),
        id = $parent.data('id'),
        status = $this.text();
    $this.text($link.text());
    $link.text(status);
    $parent.slideToggle(function() {
        var list = $parent.children().get();
        list.sort(sortList);
        $parent.html($(list))
    });

    /* do ajax*/
});


function sortList(a, b) {
    return $.trim($(a).text()).localeCompare($.trim($(b).text()));
}