title: How to click the li in the dropdown programmatically
body: <p>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 <code>click()</code> function does not work.</p>
  
  <pre><code>&lt;div class="btn-group custom-drop" style="display:inline-block;"&gt;
      &lt;button type="button" class="btn btn-default dropdown-toggle drop-width" data-toggle="dropdown"&gt;&lt;div class="dropdownValue" style="color: rgba(51, 51, 51, 0.56);"&gt;Choose An Occasion &lt;/div&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
  
      &lt;ul class="dropdown-menu scrollable-menu" role="menu"&gt;
          &lt;li class="bla" id="1"&gt;&lt;a icon="birthdayIcon" href="#"&gt;Birthday&lt;/a&gt;&lt;/li&gt;
          &lt;li class="bla" id="2"&gt;&lt;a icon="weddingIcon" href="#"&gt;Wedding&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="3"&gt;&lt;a icon="anniversaryIcon" href="#"&gt;Anniversary&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="4"&gt;&lt;a icon="farewellIcon" href="#"&gt;Farewell&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="5"&gt;&lt;a icon="thanksGivingIcon" href="#"&gt;Thanks giving&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="6"&gt;&lt;a icon="graduationIcon" href="#"&gt;Graduation Day&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="7"&gt;&lt;a icon="newYearIcon" href="#"&gt;New Year’s Day – January 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="8"&gt;&lt;a icon="valentineIcon" href="#"&gt;Valentine’s Day – February 14&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="9"&gt;&lt;a icon="womenIcon" href="#"&gt;International Women’s Day – March 8&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="10"&gt;&lt;a icon="easterIcon" href="#"&gt;Easter – March 27&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="11"&gt;&lt;a icon="motherIcon" href="#"&gt;Mother’s Day – May 8&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="12"&gt;&lt;a icon="fatherIcon" href="#"&gt;Father’s Day - June 19&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="13"&gt;&lt;a icon="doctorIcon" href="#"&gt;Doctor’s Day – July 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="14"&gt;&lt;a icon="parentIcon" href="#"&gt;Parent’s Day – July 24&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="15"&gt;&lt;a icon="friendIcon" href="#"&gt;Friendship Day – August 7&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="16"&gt;&lt;a icon="sdIcon" href="#"&gt;Son and Daughter Day – August 11&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="17"&gt;&lt;a icon="teacherIcon" href="#"&gt;Teachers Day – September 5&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="18"&gt;&lt;a icon="dussehraIcon" href="#"&gt;Dussehra – October 11&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="19"&gt;&lt;a icon="bossIcon" href="#"&gt;Boss’s Day – October 17&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="20"&gt;&lt;a icon="diwaliIcon" href="#"&gt;Diwali  - October 30&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="21"&gt;&lt;a icon="halloweenIcon" href="#"&gt;Halloween – October 31&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="22"&gt;&lt;a icon="childrenIcon" href="#"&gt;Children’s Day – November 14&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="23"&gt;&lt;a icon="christmasIcon" href="#"&gt;Christmas – December 25&lt;/a&gt;&lt;/li&gt;
          &lt;li class='bla' id="24"&gt;&lt;a icon="shijokesIcon" href="#"&gt;Just get a Shijokes&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JS I have</p>
  
  <pre><code>$(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));
        });
  });
  </code></pre>
  
  <p>Observations I have seen</p>
  
  <p><code>$('#2').click()</code> would not work, that means click is not applicable to li I guess.</p>
  
  <p>Problem I am facing </p>
  
  <p>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.</p>