Question

Hello i am trying to make my custom made combobox with using jquery and ul li menus. So when mouse clicked to the li element i have to read its value and set its parent to the clicked element value etc. Basic selecting method.

So how can i read the clicked li element value and set that value to the parent of it. Here my structure.

  <ul class="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">All Abilities</a>
                <ul class="subnav">
                    <li><a href="#">Fire Master</a></li>
                    <li><a href="#">Great Attack</a></li>
                    <li><a href="#">Manyak Ability</a></li>
                    <li><a href="#">Super Ability</a></li>
                    <li><a href="#">Deneme Ability</a></li>
                </ul>
            </li>
        </ul>

Here the jquery code

        $(document).ready(function () {

        $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

        $("ul.topnav li").click(function () { //When trigger is clicked...

            //Following events are applied to the subnav itself (moving subnav up and down)
            $(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

            $(this).hover(function () {
            }, function () {
                $(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            });

            //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function () {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function () {    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
        });


        $("ul.topnav li ul.subnav li a").click(function () { //When trigger is clicked...

            //****************** none of these working*************************//
            var srVal1 = $(this).find("ul.subnav").val();
            var srVal2 = $(this).find("subnav").val();
            var srVal3 = $(this).find("li a").val();
            var srVal4 = $(this).find("a").val();
            var srVal5 = $(this).parent("li").val();
            var srVal5 = $(this).find("li").val();
            var srVal6 = $(this).val();
            var srVal7 = $(this).parent("li a").val();

        });
    });

Answer 1

$('ul.topnav li ul.subnav li a').click(function(){

    $(this).parents('ul.subnav').siblings('a').html($(this).text());

});