gates gates -4 years ago 123
jQuery Question

How to click the li in the dropdown programmatically

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download