如何以编程方式单击下拉列表中的li

Question

I am a having a custom dropdown in which on the click of the item in the dropdown, top selection text I am changing. But when the user goes forward to the next step and goes back to the current step, I am trying to store in a local storage, And using that id in the local storage .. I want to click the li programmatically. How ever the click() function does not work.

<div class="btn-group custom-drop" style="display:inline-block;">
    <button type="button" class="btn btn-default dropdown-toggle drop-width" data-toggle="dropdown"><div class="dropdownValue" style="color: rgba(51, 51, 51, 0.56);">Choose An Occasion </div><span class="caret"></span></button>

    <ul class="dropdown-menu scrollable-menu" role="menu">
        <li class="bla" id="1"><a icon="birthdayIcon" href="#">Birthday</a></li>
        <li class="bla" id="2"><a icon="weddingIcon" href="#">Wedding</a></li>
        <li class='bla' id="3"><a icon="anniversaryIcon" href="#">Anniversary</a></li>
        <li class='bla' id="4"><a icon="farewellIcon" href="#">Farewell</a></li>
        <li class='bla' id="5"><a icon="thanksGivingIcon" href="#">Thanks giving</a></li>
        <li class='bla' id="6"><a icon="graduationIcon" href="#">Graduation Day</a></li>
        <li class='bla' id="7"><a icon="newYearIcon" href="#">New Year’s Day – January 1</a></li>
        <li class='bla' id="8"><a icon="valentineIcon" href="#">Valentine’s Day – February 14</a></li>
        <li class='bla' id="9"><a icon="womenIcon" href="#">International Women’s Day – March 8</a></li>
        <li class='bla' id="10"><a icon="easterIcon" href="#">Easter – March 27</a></li>
        <li class='bla' id="11"><a icon="motherIcon" href="#">Mother’s Day – May 8</a></li>
        <li class='bla' id="12"><a icon="fatherIcon" href="#">Father’s Day - June 19</a></li>
        <li class='bla' id="13"><a icon="doctorIcon" href="#">Doctor’s Day – July 1</a></li>
        <li class='bla' id="14"><a icon="parentIcon" href="#">Parent’s Day – July 24</a></li>
        <li class='bla' id="15"><a icon="friendIcon" href="#">Friendship Day – August 7</a></li>
        <li class='bla' id="16"><a icon="sdIcon" href="#">Son and Daughter Day – August 11</a></li>
        <li class='bla' id="17"><a icon="teacherIcon" href="#">Teachers Day – September 5</a></li>
        <li class='bla' id="18"><a icon="dussehraIcon" href="#">Dussehra – October 11</a></li>
        <li class='bla' id="19"><a icon="bossIcon" href="#">Boss’s Day – October 17</a></li>
        <li class='bla' id="20"><a icon="diwaliIcon" href="#">Diwali  - October 30</a></li>
        <li class='bla' id="21"><a icon="halloweenIcon" href="#">Halloween – October 31</a></li>
        <li class='bla' id="22"><a icon="childrenIcon" href="#">Children’s Day – November 14</a></li>
        <li class='bla' id="23"><a icon="christmasIcon" href="#">Christmas – December 25</a></li>
        <li class='bla' id="24"><a icon="shijokesIcon" href="#">Just get a Shijokes</a></li>
    </ul>
</div>

Here is the JS I have

$(document).ready(function(){

    //persistence for the choose ocdasion
    if(localStorage.getItem('occasion_id')! == 'null'){
        var id_previousclick = localStorage.getItem('occasion_id');
        console.log(id_previousclick);
        $('#'+id_previousclick).click();
    }

    $('.dropdown-menu li').click(function(event){
            $('.dropdownValue').text(event.srcElement.text);
            var iconHolder = $('.iconHolder').removeClass();
            iconHolder.addClass('iconHolder '+ $(event.srcElement).attr('icon'));
            //sending the dropdown id 
            var send_occ = event.srcElement.parentElement.id;
            console.log(send_occ);
            $('.send-occ').val(send_occ);
            localStorage.setItem("occasion_id",parseInt(send_occ));
      });
});

Observations I have seen

$('#2').click() would not work, that means click is not applicable to li I guess.

Problem I am facing

The if condition currently I have in JS, does not let the item clicked to be displayed on the top of the dropdown. Removing the if condition is making the dropdown clickable and top element is changing.

Answer 1

Try this function:

function changeEv(el) {
 $('.dropdownValue').text(el.text());
            var iconHolder = $('.iconHolder').removeClass();
            iconHolder.addClass('iconHolder '+ el.find('a').attr('icon'));
}
    //persistence for the choose ocdasion
    if(localStorage.getItem('occasion_id') != 'null'){
        var id_previousclick = localStorage.getItem('occasion_id');
        console.log(id_previousclick);
        changeEv($('#'+id_previousclick))
    }

    $('.dropdown-menu li').click(function(event){
           changeEv($(this))
            //sending the dropdown id 
            var send_occ =  $(this).attr('id');
            console.log(send_occ);
            $('.send-occ').val(send_occ);
            localStorage.setItem("occasion_id",parseInt(send_occ));
      });

https://jsfiddle.net/67efmfun/1/

Answer 2

You click the li-element before you attached an event handler, first attach the event handler and then trigger your clicks. I ran the code in the fiddle, and there are some errors, but the click handler is being run.

$(document).ready(function() {
  $('.dropdown-menu li').click(function(event) {
    $('.dropdownValue').text(event.srcElement.text);
    var iconHolder = $('.iconHolder').removeClass();
    iconHolder.addClass('iconHolder ' + $(event.srcElement).attr('icon'));
    //sending the dropdown id 
    var send_occ = event.srcElement.parentElement.id;
    console.log(send_occ);
    $('.send-occ').val(send_occ);
    localStorage.setItem("occasion_id", parseInt(send_occ));
  });
  //persistence for the choose ocdasion
  if (localStorage.getItem('occasion_id') ! == 'null') {
    var id_previousclick = localStorage.getItem('occasion_id');
    console.log(id_previousclick);
    $('#' + id_previousclick).click();
  }


});

Answer 3

Ok, These are the mistakes that I noticed so far.

1. There's a typo here if(localStorage.getItem('occasion_id')! == 'null') . Fix it to !== .
2. event.srcElement is undefined. I believe you want to do $(this) . So it'd be $(this).text() to get the text of the clicked li .
3. Same with the 2nd, the li doesn't have the icon attribute . Its' child does which is a . So it would be $(this).find('a').attr('icon')
4. Same with the 2nd, event.srcElement.parentElement.id to this.parentElement.id . I believe you want to select the parent of li . But in this case, it will always return null unless you define the id of the container ul .
5. Then you can happily call $('#2').click() or with trigger .

However, I still haven't noticed what .iconHolder is. So, when you assign the class to iconHolder , it would not work in this answer.

So finally, this is how it should look like

$(function() {
  if (localStorage.getItem('occasion_id') !== 'null') {
    var id_previousclick = localStorage.getItem('occasion_id');
    console.log(id_previousclick);
    $('#' + id_previousclick).click();
  }

  $('.dropdown-menu li').click(function(event) {
    $('.dropdownValue').text($(this).text());
    var iconHolder = $('.iconHolder').removeClass();
    iconHolder.addClass('iconHolder ' + $(this).find('a').attr('icon'));

    //sending the dropdown id 
    var send_occ = this.parentElement.id;
    console.log(send_occ);
    $('.send-occ').val(send_occ);
    localStorage.setItem("occasion_id", parseInt(send_occ));
  });

  $("#2").click();
})

And the fiddle

Answer 4

try this script.

<script>
    $(document).on("click",".bla" , function () {
        alert($(this).attr('id'));
        // OR
        // Your next code here
    });
</script>

Also this will Work

$(document).on("click",".dropdown-menu li" , function () {
    alert($(this).attr('id'));
});